/* Refined — Smith Matthew resume template: mustard ribbon, condensed headings, light gray frame */
:root {
  --outer: #f0f0f0;
  --outer-2: #e6e6e6;
  --paper: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #1a1a1a;
  --muted: #6e6e6e;
  --muted-2: #9a9a9a;
  --line: #e9e9e9;
  --line-2: #ececec;
  --mustard: #f0c44a;
  --mustard-2: #eabf3f;
  --mustard-soft: #fef6d9;
  --radius-paper: 26px;
  --font-cond: "Raleway", sans-serif;
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Poppins", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--outer);
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* containers */
.container-paper { max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* topbar - outside paper, minimal */
.topbar {
  position: sticky; top: 0; z-index: 997;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 10px 0;
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-cond); font-weight: 500; letter-spacing: 0.06em; font-size: 13px; }
.brand-mark { width: 28px; height: 28px; border-radius: 6px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.brand em { font-style: normal; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; margin-left: 4px; }
.navmenu ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; align-items: center; }
.navmenu a { font-family: var(--font-cond); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: #3a3f45; padding: 4px 0; position: relative; }
.navmenu a:hover, .navmenu a.active { color: var(--ink); }
.navmenu a.active::after { content:""; position: absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--ink); }
.btn-top { background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; letter-spacing: 0.04em; }
.mobile-nav-toggle { font-size: 24px; cursor: pointer; }
@media (max-width: 1199px){
  .navmenu ul { position: fixed; inset:56px 16px auto 16px; background: var(--paper); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:0 12px 30px rgba(0,0,0,0.12); flex-direction:column; align-items:stretch; gap:0; display:none; }
  .mobile-nav-active .navmenu ul{ display:flex; }
  .mobile-nav-active .navmenu{ position:fixed; inset:0; background:rgba(0,0,0,0.28); }
  .navmenu a{ padding:10px 8px; }
}

/* page */
.page { padding: 18px 0 32px; }
.paper-wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.paper {
  background: var(--paper);
  border-radius: var(--radius-paper);
  box-shadow: 0 18px 50px rgba(0,0,0,0.14), 0 2px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}

/* ===== Template header ===== */
.tpl-header {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  padding: 36px 36px 18px 36px;
  align-items: start;
}
@media (max-width: 880px){ .tpl-header{ grid-template-columns:1fr; padding:22px 20px 16px; } }
.tpl-header-left { position: relative; display: flex; align-items: stretch; min-height: 260px; }
.photo-block {
  width: 160px;
  background: #eee;
  overflow: hidden;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
.photo-block img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1);
}
.ribbon {
  flex: 1;
  background: var(--mustard);
  margin-left: -18px;
  padding: 28px 22px 18px 28px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  display: flex; flex-direction: column; justify-content: flex-start;
}
.ribbon-num {
  font-family: var(--font-cond);
  font-size: 78px; line-height: 0.85; font-weight: 300;
  letter-spacing: -0.04em; color: var(--ink);
}
.ribbon-num span { font-weight: 300; font-size: 58px; vertical-align: super; margin-left: 2px; }
.ribbon-text {
  margin-top: 12px;
  font-family: var(--font-cond); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; line-height: 1.35; color: var(--ink);
}

/* right header */
.tpl-header-right { padding: 10px 0 0 36px; }
@media (max-width:880px){ .tpl-header-right{ padding:18px 0 0; } }
.tpl-name { margin:0; line-height:0.88; font-family:var(--font-cond); text-transform:uppercase; }
.tpl-name .first {
  display:block; font-size: clamp(30px, 4.2vw, 42px); font-weight:400; letter-spacing:0.12em; color:var(--ink); margin-left:2px;
}
.tpl-name .last {
  display:block; font-size: clamp(52px, 8vw, 86px); font-weight:700; letter-spacing:0.06em; margin-top:2px;
}
.tpl-role {
  margin:6px 0 0; font-family:var(--font-cond); font-size:11px; font-weight:400; letter-spacing:0.18em; color:#6b6b6b; text-transform:none;
  text-align: left; padding-left: 4px;
}
@media (max-width:880px){ .tpl-role{ letter-spacing:0.14em; } }
.tpl-meta {
  margin-top:18px; display:flex; flex-direction:column; gap:4px;
  font-family: var(--font-mono); font-size:11px; color:var(--muted);
}
.tpl-meta span { display:inline-flex; gap:8px; align-items:center; }
.typed-wrap { margin-top:2px; color:var(--ink); font-weight:500; }

/* ===== Body ===== */
.tpl-body {
  display: grid;
  grid-template-columns: 1.58fr 0.88fr;
  gap: 0;
}
@media (max-width:880px){ .tpl-body{ grid-template-columns:1fr; } }
.col-left { padding: 6px 30px 18px 36px; border-right:1px solid var(--line); }
.col-right { padding: 6px 28px 18px 28px; background:#fcfcfc; }
@media (max-width:880px){
  .col-left{ border-right:0; border-bottom:1px solid var(--line); padding: 12px 20px 16px; }
  .col-right{ padding:16px 20px; }
}

/* Section headings - spaced condensed */
.sec { margin-bottom:22px; }
.sec:last-child{ margin-bottom:0; }
.sec-heading {
  font-family:var(--font-cond); font-size:14px; font-weight:700;
  letter-spacing:0.12em; text-transform:none; color:var(--ink);
  margin:0 0 14px; padding-bottom:0;
}
.sec-body { position: relative; }

/* Profile */
.profile-body { position:relative; padding-left:2px; }
.quote-mark {
  position:absolute; left:-2px; top:-6px;
  font-family:var(--font-cond); font-size:42px; line-height:1; color:var(--mustard); font-weight:700;
}
.profile-body p {
  font-size:14.5px; line-height:1.75; color:var(--muted); margin:0 0 12px 18px;
}
.profile-body p strong{ color:var(--ink); }

/* Experience - timeline line drawn from centre of dot */
.exp-item { position:relative; padding-left:18px; margin-bottom:18px; }
.exp-item::before { content:""; position:absolute; left:0; top:0; bottom:-18px; width:2px; background:#a5d6a7; }
.exp-item:first-child::before { top:7.5px; } /* centre of 10px dot at top:2.5px -> 2.5+5 */
.exp-item:last-child::before { bottom:0; }
.exp-item:last-child{ margin-bottom:0; }
.exp-head { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.exp-head .dot { width:10px; height:10px; border-radius:50%; background:#4caf50; position:absolute; left:-4px; top:2.5px; z-index:1; }
.exp-head h3 {
  font-family:var(--font-cond); font-size:12px; font-weight:600; letter-spacing:0.06em; margin:0; text-transform:none;
}
.exp-head .pipe{ color:var(--line); margin:0 6px; font-weight:400; }
.exp-head .date{ font-weight:400; color:var(--muted); letter-spacing:0.05em; }
.company { font-family:var(--font-cond); font-size:12px; font-weight:700; letter-spacing:0.06em; margin:2px 0 6px; color:var(--ink-2); }
.exp-item ul{ margin:0; padding-left:14px; font-size:14px; line-height:1.7; color:var(--muted); }
.exp-item li{ margin-bottom:3px; }
.exp-item li strong{ color:var(--ink); }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tags span{ font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:0.06em; background:#f5f5f3; border:1px solid var(--line); padding:3px 7px; border-radius:999px; }

/* Projects — compact text list (replaces image grid) */
.mini-projects { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mini-projects li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.mini-projects li:last-child { border-bottom: 0; }
.mini-projects a { font-family: var(--font-cond); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
.mini-projects a:hover { color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; }
.mini-projects span { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Legacy grid kept for reference */
.proj-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .proj-grid{ grid-template-columns:1fr; } }
.proj-card{
  display:flex; gap:10px; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:8px; background:#fff;
  transition: all 0.16s;
}
.proj-card:hover{ border-color:#d6d6d6; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.06); }
.proj-card img{ width:64px; height:54px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:#f5f5f3; flex-shrink:0; }
.proj-card h4{ font-family:var(--font-cond); font-size:11px; font-weight:600; letter-spacing:0.06em; margin:0 0 2px; text-transform:none; }
.proj-card span{ font-size:10px; color:var(--muted); display:block; line-height:1.3; word-break:break-all; }
.proj-card em{ font-style:normal; font-family:var(--font-mono); font-size:9px; color:var(--muted-2); }

/* Right column */
.reach p{ font-size:13px; line-height:1.65; margin:0 0 4px; color:var(--muted); font-family:var(--font-mono); }
.reach .label{ font-weight:700; color:var(--ink); margin-right:6px; letter-spacing:0.04em; }
.reach a{ color:var(--muted); font-weight:500; }
.reach a:hover{ color:var(--ink); }
.reach .muted{ font-size:11px; color:var(--muted-2); margin-top:8px; }
.btn-mustard{
  margin-top:10px; background:var(--mustard); color:var(--ink); border:1px solid var(--mustard-2);
  padding:9px 14px; border-radius:999px; font-family:var(--font-cond); font-size:12px; font-weight:700; letter-spacing:0.08em;
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
}
.btn-mustard:hover{ background:var(--mustard-2); color:var(--ink); }

/* Education right */
.edu-stack{ display:grid; gap:14px; }
.edu-item h4{ font-family:var(--font-cond); font-size:12px; font-weight:600; letter-spacing:0.06em; margin:0 0 2px; }
.edu-item .pipe{ color:var(--line); margin:0 4px; }
.edu-item .uni{ font-family:var(--font-cond); font-size:11.5px; font-weight:700; letter-spacing:0.05em; margin:0 0 2px; }
.edu-item .desc{ font-size:13px; line-height:1.6; color:var(--muted); margin:0; }

/* Skills */
.skill-block{ margin-bottom:14px; }
.skill-block h4{ font-family:var(--font-cond); font-size:11px; font-weight:700; letter-spacing:0.08em; margin:0 0 8px; color:var(--ink-2); }
.pills{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.pills span{ font-size:11px; font-weight:600; background:#fff; border:1px solid var(--line); padding:5px 9px; border-radius:999px; }
.bar-row{ display:flex; justify-content:space-between; font-size:11px; font-weight:600; font-family:var(--font-mono); margin-top:6px; }
.bar{ height:5px; background:var(--line); border-radius:999px; overflow:hidden; margin-top:2px; }
.bar span{ display:block; height:100%; background:#4caf50; border-radius:999px; }
.lang-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px dashed var(--line); font-family:var(--font-cond); font-size:12px; letter-spacing:0.06em; font-weight:600; }
.lang-row:last-child{ border-bottom:0; }
.dots{ display:flex; gap:4px; }
.dots i{ width:7px; height:7px; border-radius:50%; border:1px solid var(--line); background:#fff; }
.dots i.f{ background:var(--ink); border-color:var(--ink); }

/* Footer inside paper */
.paper-footer{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 28px; border-top:1px solid var(--line); background:#fcfcfc;
  font-family:var(--font-mono); font-size:10px; color:var(--muted-2);
}
@media (max-width:880px){ .paper-footer{ padding:12px 20px; } }

/* Site footer outside */
.site-footer{ padding:16px 0; font-family:var(--font-mono); font-size:11px; color:#5a6470; background: #ffffff; border-top:1px solid rgba(0,0,0,0.06); }
.site-footer a{ font-weight:600; color:var(--ink); }
.footer-links{ display:flex; gap:14px; }

/* Preloader & scroll */
#preloader{ position:fixed; inset:0; z-index:9999; background:var(--outer); display:grid; place-items:center; }
#preloader:before{ content:""; width:36px; height:36px; border:3px solid rgba(0,0,0,0.12); border-top-color:var(--ink); border-radius:50%; animation:spin 0.9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.scroll-top{ position:fixed; right:16px; bottom:16px; width:40px; height:40px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; opacity:0; visibility:hidden; transition:all 0.2s; z-index:998; }
.scroll-top.active{ opacity:1; visibility:visible; }

@media print{
  .topbar, .site-footer, .scroll-top, #preloader{ display:none !important; }
  body{ background:#fff; }
  .page{ padding:0; }
  .paper-wrap{ padding:0; max-width:none; }
  .paper{ box-shadow:none; border:0; border-radius:0; }
}