/*
Theme Name: MW Blueprint
Theme URI: https://marcus.wahila.com
Author: Marcus Wahila
Description: Portfolio theme for Marcus Wahila. Square-cover project grid and a resume page, built on a cool blueprint-steel palette.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: mw-blueprint
*/

:root{
  --ground:#EFF3F7;
  --surface:#FFFFFF;
  --sunk:#E3E9F0;
  --ink:#0E1621;
  --ink-soft:#54626E;
  --ink-faint:#7E8B97;
  --rule:#D7DEE6;
  --rule-strong:#B4C0CB;
  --accent:#1B5E8C;
  --accent-deep:#12456A;
  --accent-soft:#E2EDF5;
  --shadow-s:0 1px 2px rgba(14,22,33,.05);
  --shadow-m:0 2px 4px rgba(14,22,33,.06),0 12px 28px rgba(14,22,33,.07);

  --f-dis:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;

  --gut:clamp(16px,4vw,44px);
  --max:1320px;
  --read:760px;
  --head-h:76px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.mw-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:10px 16px;
  font-family:var(--f-mono);font-size:13px;
}
.mw-skip:focus{left:8px;top:8px}

.mw-wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.mw-wrap--read{max-width:calc(var(--read) + var(--gut) * 2)}

.mw-lbl{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
  display:block;
}

/* ============ HEADER ============ */
.mw-head{
  position:sticky;top:0;z-index:100;
  background:var(--surface);
  border-bottom:1px solid var(--rule);
}
.mw-head__inner{
  max-width:var(--max);margin:0 auto;padding:12px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--head-h);
}

.mw-id{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0}
.mw-id__shot{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  overflow:hidden;background:var(--sunk);
  border:1px solid var(--rule-strong);
  display:grid;place-items:center;
}
.mw-id__shot img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--shot-pos,center center);
  display:block;
}
.mw-id__initials{
  font-family:var(--f-mono);font-size:14px;font-weight:500;
  letter-spacing:.06em;color:var(--ink-faint);
}
.mw-id__text{display:flex;flex-direction:column;min-width:0}
.mw-id__name{
  font-family:var(--f-dis);font-weight:700;font-size:20px;
  letter-spacing:-.015em;line-height:1.15;white-space:nowrap;
}
.mw-id__role{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.4;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mw-id:hover .mw-id__name{color:var(--accent)}

.mw-nav{display:flex;gap:8px;flex:0 0 auto}
.mw-btn{
  font-family:var(--f-dis);font-weight:600;font-size:14px;letter-spacing:.01em;
  padding:9px 18px;border-radius:2px;text-decoration:none;
  color:var(--ink-soft);border:1px solid var(--rule);background:var(--surface);
  transition:color .15s,border-color .15s,background .15s;white-space:nowrap;
}
.mw-btn:hover{color:var(--accent);border-color:var(--rule-strong)}
.mw-btn.is-current{
  color:#fff;background:var(--accent);border-color:var(--accent);
}

@media (max-width:640px){
  .mw-head__inner{flex-direction:column;align-items:stretch;gap:12px;padding-block:14px}
  .mw-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mw-btn{text-align:center}
  .mw-id__name{font-size:19px;white-space:normal}
  .mw-id__role{white-space:normal}
  .mw-head{position:static}
}

.mw-main{display:block;min-height:52vh}

/* ============ PROJECT GRID ============ */
.mw-work{padding-block:clamp(28px,5vw,52px) clamp(48px,7vw,88px)}

.mw-workhead{
  display:flex;align-items:baseline;gap:10px;
  padding-bottom:12px;margin-bottom:clamp(20px,3vw,30px);
  border-bottom:1px solid var(--rule-strong);
}
.mw-count{
  font-family:var(--f-mono);font-size:11px;color:var(--accent);
  letter-spacing:.08em;font-variant-numeric:tabular-nums;
}

.mw-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,34px);
}
@media (max-width:980px){.mw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.mw-grid{grid-template-columns:minmax(0,1fr);gap:26px}}

.mw-cell{min-width:0;counter-increment:mwi}
.mw-grid{counter-reset:mwi}

.mw-tile{
  display:flex;flex-direction:column;gap:13px;
  text-decoration:none;color:inherit;height:100%;
}
.mw-tile__frame{
  display:block;position:relative;
  aspect-ratio:1/1;width:100%;
  overflow:hidden;background:var(--sunk);
  border:1px solid var(--rule);
  border-radius:2px;
  box-shadow:var(--shadow-s);
  transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease;
}
.mw-tile__frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.mw-tile__frame::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(14,22,33,.05);
  pointer-events:none;
}
.mw-tile__img--empty{width:100%;height:100%;background:var(--sunk)}

.mw-tile:hover .mw-tile__frame{
  border-color:var(--accent);
  box-shadow:var(--shadow-m);
  transform:translateY(-2px);
}
.mw-tile:hover .mw-tile__frame img{transform:scale(1.035)}

.mw-tile__body{
  display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline;
}
.mw-tile__title{
  font-family:var(--f-dis);font-weight:600;font-size:16.5px;
  line-height:1.32;letter-spacing:-.008em;color:var(--ink);
  text-wrap:balance;
}
.mw-tile:hover .mw-tile__title{color:var(--accent)}
.mw-tile__year{
  font-family:var(--f-mono);font-size:11.5px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.mw-tile__body::before{
  content:counter(mwi,decimal-leading-zero);
  grid-column:1/-1;grid-row:1;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  color:var(--accent);opacity:.75;
}
.mw-tile__title{grid-column:1;grid-row:2}
.mw-tile__year{grid-column:2;grid-row:2}

.mw-empty{color:var(--ink-soft);padding-block:40px}

/* ============ PROJECT PAGE ============ */
.mw-proj,.mw-res{padding-block:clamp(26px,4vw,44px) clamp(56px,8vw,96px)}

.mw-back{
  display:inline-block;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  text-decoration:none;margin-bottom:clamp(22px,4vw,38px);
}
.mw-back::before{content:"\2190";margin-right:8px;color:var(--accent)}
.mw-back:hover{color:var(--accent)}

.mw-proj__head{
  padding-bottom:clamp(18px,3vw,26px);margin-bottom:clamp(24px,4vw,38px);
  border-bottom:1px solid var(--rule-strong);
}
.mw-proj__title{
  font-family:var(--f-dis);font-weight:700;
  font-size:clamp(28px,4.6vw,42px);line-height:1.1;letter-spacing:-.022em;
  margin:10px 0 0;text-wrap:balance;
}

.mw-proj__stand{
  margin:14px 0 0;font-size:19px;line-height:1.5;color:var(--ink-soft);
  max-width:58ch;text-wrap:pretty;
}
.mw-proj__body{font-size:17.5px}
.mw-proj__body > *{margin-block:0 1.15em}
.mw-proj__body > *:last-child{margin-bottom:0}
.mw-proj__body h2,.mw-proj__body h3,.mw-proj__body h4{
  font-family:var(--f-dis);font-weight:600;letter-spacing:-.014em;
  line-height:1.25;margin-top:1.9em;margin-bottom:.5em;text-wrap:balance;
}
.mw-proj__body h2{font-size:26px}
.mw-proj__body h3{font-size:21px}
.mw-proj__body h4{font-size:18px}
.mw-proj__body p{margin-block:0 1.15em}
.mw-proj__body ul,.mw-proj__body ol{padding-left:1.25em;margin-block:0 1.15em}
.mw-proj__body li{margin-bottom:.45em}
.mw-proj__body a{color:var(--accent)}
.mw-proj__body strong{font-weight:600}
.mw-proj__body blockquote{
  margin:1.6em 0;padding:4px 0 4px 20px;
  border-left:2px solid var(--accent);color:var(--ink-soft);
}
.mw-proj__body code{
  font-family:var(--f-mono);font-size:.86em;
  background:var(--sunk);padding:2px 5px;border-radius:2px;
}
.mw-proj__body pre{
  background:var(--sunk);border:1px solid var(--rule);border-radius:2px;
  padding:16px 18px;overflow-x:auto;font-family:var(--f-mono);font-size:14px;line-height:1.6;
}
.mw-proj__body pre code{background:none;padding:0}

/* Images inside project content: full width of the reading column, never floated
   into a narrow sliver on mobile. */
.mw-proj__body figure,
.mw-proj__body .wp-block-image{
  margin:1.9em 0;
  float:none !important;
  width:auto !important;
  max-width:100% !important;
}
.mw-proj__body .wp-block-image img,
.mw-proj__body figure img{
  display:block;width:100%;height:auto;
  border:1px solid var(--rule);border-radius:2px;background:var(--surface);
}
.mw-proj__body figcaption{
  font-family:var(--f-mono);font-size:11.5px;line-height:1.55;
  color:var(--ink-faint);margin-top:10px;text-align:left;
}
.mw-proj__body .alignleft,
.mw-proj__body .alignright,
.mw-proj__body .aligncenter,
.mw-proj__body .alignwide,
.mw-proj__body .alignfull{
  float:none !important;margin-inline:0 !important;
  max-width:100% !important;width:auto !important;
}
.mw-proj__body .wp-block-embed__wrapper,
.mw-proj__body iframe{max-width:100%}
.mw-proj__body .wp-block-file{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:2px;padding:14px 16px;
}
.mw-proj__body .wp-block-file__button{
  background:var(--accent);color:#fff;border-radius:2px;
  padding:7px 14px;font-family:var(--f-dis);font-weight:600;
  font-size:13.5px;text-decoration:none;
}
.mw-proj__body .wp-block-spacer{display:none}
.mw-proj__body .wp-block-columns{display:flex;flex-wrap:wrap;gap:24px}
.mw-proj__body .wp-block-column{flex:1 1 260px;min-width:0}
.mw-proj__body .wp-block-separator{
  border:0;border-top:1px solid var(--rule-strong);margin:2.4em 0;
}

/* ---- prev / next ---- */
.mw-pager{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  margin-top:clamp(46px,7vw,74px);padding-top:26px;
  border-top:1px solid var(--rule-strong);
}
.mw-pager__link{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;
  color:var(--ink);max-width:44ch;flex:1 1 240px;
}
.mw-pager__link--n{text-align:right;align-items:flex-end}
.mw-pager__t{
  font-family:var(--f-dis);font-weight:600;font-size:15.5px;line-height:1.35;
}
.mw-pager__link:hover .mw-pager__t{color:var(--accent)}

/* ============ RESUME ============ */
.mw-res__head{
  display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;
  justify-content:space-between;
  padding-bottom:clamp(18px,3vw,26px);margin-bottom:clamp(22px,3.5vw,34px);
  border-bottom:1px solid var(--rule-strong);
}
.mw-res__title{
  font-family:var(--f-dis);font-weight:700;
  font-size:clamp(28px,4.6vw,42px);line-height:1.1;letter-spacing:-.022em;margin:10px 0 0;
}
.mw-dl{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--f-dis);font-weight:600;font-size:14.5px;
  padding:11px 20px;border-radius:2px;border:1px solid var(--accent);
  transition:filter .15s,transform .15s;
}
.mw-dl:hover{filter:brightness(1.12);transform:translateY(-1px)}
.mw-dl svg{flex:0 0 auto}

.mw-res__sheet{
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  box-shadow:var(--shadow-m);padding:clamp(10px,1.6vw,18px);
}
.mw-res__img{display:block;width:100%;height:auto;border-radius:1px}
.mw-res__sheet .wp-block-spacer{display:none}
.mw-res__sheet figure{margin:0}
.mw-res__sheet .wp-block-file{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;
}

/* ============ FOOTER ============ */
.mw-foot{
  background:var(--surface);border-top:1px solid var(--rule);
  margin-top:auto;
}
.mw-foot__inner{
  max-width:var(--max);margin:0 auto;padding:clamp(34px,5vw,52px) var(--gut);
  display:grid;gap:30px;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
}
@media (max-width:700px){.mw-foot__inner{grid-template-columns:minmax(0,1fr)}}

.mw-foot__name{
  display:block;font-family:var(--f-dis);font-weight:700;font-size:19px;
  letter-spacing:-.014em;
}
.mw-foot__role{
  display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:6px;line-height:1.5;
}
.mw-foot__cols{display:flex;flex-wrap:wrap;gap:34px}
.mw-foot__col{min-width:130px}
.mw-foot__list{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;font-size:15.5px;
}
.mw-foot__list a{color:var(--ink-soft);text-decoration:none}
.mw-foot__list a:hover{color:var(--accent);text-decoration:underline}
.mw-foot__copy{
  grid-column:1/-1;margin:0;padding-top:22px;border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);
}

html,body{min-height:100%}
body{display:flex;flex-direction:column}
.mw-main{flex:1 0 auto}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .mw-tile:hover .mw-tile__frame{transform:none}
  .mw-tile:hover .mw-tile__frame img{transform:none}
}

@media print{
  .mw-head,.mw-foot,.mw-dl,.mw-back,.mw-pager{display:none !important}
  body{background:#fff}
  .mw-res__sheet{border:0;box-shadow:none;padding:0}
}