:root{
  --maxw: 920px;
  --fg: #111;
  --muted:#555;
  --link:#0645ad;
  --bg:#fff;
  --hr:#ddd;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
}
.container{
  max-width: var(--maxw);
  margin: 48px auto 72px;
  padding: 0 22px;
}
.site-title{
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.taglines{
  margin: 0 0 18px;
  font-family: var(--mono);
  color: var(--muted);
  line-height: 1.45;
}
.taglines div{ margin: 2px 0; }
.nav{
  display:flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items:center;
  margin: 14px 0 26px;
  padding: 0;
  list-style:none;
  font-family: var(--mono);
}
.nav a{
  color: var(--fg);
  text-decoration:none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nav a:hover{ border-bottom-color: var(--fg); }
.nav a.active{ font-weight: 700; border-bottom-color: var(--fg); }

h1{
  font-size: 1.9rem;
  margin: 0 0 12px;
}
h2{
  font-size: 1.25rem;
  margin: 22px 0 10px;
}
h3{
  font-size: 1.05rem;
  margin: 18px 0 8px;
}
hr{
  border: 0;
  border-top: 1px solid var(--hr);
  margin: 18px 0 18px;
}
a{ color: var(--link); }
a:hover{ text-decoration: underline; }
p{ margin: 10px 0; }
ul{ margin: 8px 0 14px 20px; }
li{ margin: 6px 0; }
.small{ color: var(--muted); font-size: .95rem; }
.kv{
  white-space: pre-line;
  margin-left: 0;
}
.card{
  border: 1px solid var(--hr);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0 14px;
}
.pills{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:8px
}
.pill{
  font-family: var(--mono);
  font-size: .9rem;
  border: 1px solid var(--hr);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--muted);
}
.footer{
  margin-top: 46px;
  padding-top: 16px;
  border-top: 1px solid var(--hr);
  font-family: var(--mono);
  color: var(--muted);
  font-size: .92rem;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--mono);
  border: 1px solid var(--hr);
  border-radius: 10px;
  padding: 8px 10px;
  background: transparent;
  cursor:pointer;
  color: var(--fg);
}
.button:hover{ background: #f7f7f7; }
.code{
  font-family: var(--mono);
  font-size: .95rem;
}
.embed{
  width: 100%;
  height: 860px;
  border: 1px solid var(--hr);
  border-radius: 10px;
}
@media (max-width: 600px){
  .container{ margin-top: 30px; }
  .site-title{ font-size: 1.9rem; }
  .embed{ height: 720px; }
}
.contact a,
.contact a:link,
.contact a:visited,
.contact a:hover,
.contact a:focus,
.contact a:active {
  text-decoration: none !important;
}
/* Header photo + layout */
.header-row{
  display:flex;
  align-items:flex-start;
  gap:28px;
}
.header-photo{
  display:block;
  flex:0 0 auto;
  width:160px;      /* было 120 */
  height:160px;     /* было 120 */
  object-fit:cover;
  object-position:50% 20%;
  border-radius:14px; /* чуть больше, чтобы красиво */
  border:1px solid rgba(0,0,0,.12);
  background:#f2f2f2;
}

@media (max-width:700px){
  .header-row{ gap:14px; }
  .header-photo{ width:96px; height:96px; } /* было 72 */
}
/* ===== EDUCATION GRID (force) ===== */
.edu{
  display:grid !important;
  grid-template-columns: 170px 1fr !important;
  gap: 10px 18px !important;
  margin: 10px 0 14px !important;
}
.edu .dates{
  font-family: var(--mono);
  color: var(--muted);
  line-height: 1.35;
}
.edu .dates .when{ font-weight:700; color:var(--fg); }
.edu .dates .where{ font-style:italic; }
.edu .item .school{ font-weight:700; }
.edu .item .degree{ margin-top:2px; }
.edu .item .courses{ margin-top:2px; font-style:italic; }
@media (max-width:680px){
  .edu{ grid-template-columns:1fr !important; }
}
/* Relevant coursework line */
.courses-line{
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.courses-label{
  font-style: normal;      /* НЕ курсив */
  color: var(--muted);
  font-family: var(--mono);
  white-space: nowrap;
}

/* Smaller pills for coursework */
.pills.small{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.pills.small .pill{
  font-size: .82rem;
  padding: 2px 8px;
  line-height: 1.2;
}
/* ===== EXPERIENCE GRID (same style as Education) ===== */
.exp{
  display:grid !important;
  grid-template-columns: 170px 1fr !important;
  gap: 10px 18px !important;
  margin: 10px 0 14px !important;
}

.exp .dates{
  font-family: var(--mono);
  color: var(--muted);
  line-height: 1.35;
}
.exp .dates .when{ font-weight:700; color:var(--fg); }
.exp .dates .where{ font-style:italic; }

.exp .item .school{ font-weight:700; }
.exp .item .degree{ margin-top:2px; }

.exp .bullets{
  margin: 6px 0 0 18px;
}
.exp .bullets li{
  margin: 6px 0;
}

@media (max-width:680px){
  .exp{ grid-template-columns:1fr !important; }
}
@media (max-width: 520px){
  .header-row{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
  }

  .header-photo{
    width: 96px;
    height: 96px;
    border-radius: 14px;
    object-fit: cover;
    object-position: 50% 18%; /* photo up */
    flex: 0 0 auto;
  }

  .header-content{
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }

  .site-title{
    font-size: 1.9rem;
    line-height: 1.15;
    margin: 0 0 6px;
  }

  /* Bio reduction */
  .taglines{
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.25;
  }
  .taglines div{ margin: 1px 0; }

  .nav{
    justify-content: flex-start;
    margin: 10px 0 18px;
    gap: 12px;
  }
}
/* ===== HONORS GRID (same style as Education/Experience) ===== */
.hon{
  display:grid !important;
  grid-template-columns: 170px 1fr !important;
  gap: 10px 18px !important;
  margin: 10px 0 14px !important;
}

.hon .dates{
  font-family: var(--mono);
  color: var(--muted);
  line-height: 1.35;
}
.hon .dates .when{ font-weight:700; color:var(--fg); }

.hon .item .school{ font-weight:700; }
.hon .item .degree{ margin-top:2px; }

@media (max-width:680px){
  .hon{ grid-template-columns: 1fr !important; }
}
/* ===== ACHIEVEMENTS GRID (same style) ===== */
.ach{
  display:grid !important;
  grid-template-columns: 170px 1fr !important;
  gap: 10px 18px !important;
  margin: 10px 0 14px !important;
}

.ach .dates{
  font-family: var(--mono);
  color: var(--muted);
  line-height: 1.35;
}
.ach .dates .when{ font-weight:700; color:var(--fg); }

.ach .item .school{ font-weight:700; }

.ach .bullets{
  margin: 6px 0 0 18px;
}
.ach .bullets li{
  margin: 6px 0;
}

@media (max-width:680px){
  .ach{ grid-template-columns: 1fr !important; }
}
/* Typing effect cursor */
.typing-cursor{
  display:inline-block;
  margin-left:2px;
  animation: typingBlink 1s steps(1,end) infinite;
}
@keyframes typingBlink{
  0%,50%{ opacity:1; }
  50.01%,100%{ opacity:0; }
}
/* Skills grid = same style as Education/Experience */
.skills{
  display:grid !important;
  grid-template-columns: 170px 1fr !important;
  gap: 10px 18px !important;
  margin: 10px 0 14px !important;
}

.skills .dates{
  font-family: var(--mono);
  color: var(--muted);
  line-height: 1.35;
}
.skills .dates .when{ font-weight:700; color:var(--fg); }

@media (max-width:680px){
  .skills{ grid-template-columns:1fr !important; }
}