/* ============================================================
   Jamsedoon Zisti — resume stylesheet
   Layout follows a printed resume: a white sheet on a grey desk.
   ============================================================ */

:root {
  --navy:        #1f3a68;   /* headings and the contact bar */
  --navy-deep:   #16294a;   /* the thin line under the contact bar */
  --accent:      #2e74b5;   /* tech-stack text and links */
  --ink:         #1c1c1c;   /* body text */
  --ink-soft:    #3d3d3d;   /* dates, secondary text */
  --rule:        #1f3a68;   /* section underlines */
  --desk:        #e9ebee;   /* page background behind the sheet */
}

/* ---------- reset ---------- */

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

body {
  margin: 0;
  padding: 32px 16px;
  background: var(--desk);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* ---------- the sheet ---------- */

.sheet {
  max-width: 850px;
  margin: 0 auto;
  background: #fff;
  padding: 0 0 36px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
}

/* ---------- name ---------- */

.masthead {
  padding: 26px 44px 20px;
  text-align: center;
}

.masthead h1 {
  margin: 0;
  font-size: 31px;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ---------- contact bar ---------- */

.contactbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 34px;
  padding: 11px 44px;
  background: var(--navy);
  border-bottom: 3px solid var(--navy-deep);
}

.contactbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 13.5px;
  text-decoration: none;
}

.contactbar a:hover,
.contactbar a:focus-visible {
  text-decoration: underline;
}

.contactbar svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ---------- sections ---------- */

section {
  padding: 0 44px;
  margin-top: 20px;
}

h2 {
  margin: 0 0 9px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--rule);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ---------- one job / degree / project ---------- */

.entry { margin-bottom: 15px; }
.entry:last-child { margin-bottom: 0; }

/* The two-column row: title on the left, date or place on the right. */
.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}

.role {
  font-weight: 700;
  color: var(--ink);
}

.role a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}

.role a:hover { color: var(--accent); }

.org {
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--ink-soft);
}

.date {
  flex-shrink: 0;
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: right;
}

/* "St. John's, NL" with a small location marker in front of it */
.pin { font-style: normal; }

.pin::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  background: var(--ink-soft);
  clip-path: polygon(50% 100%, 12% 42%, 12% 20%, 50% 0, 88% 20%, 88% 42%);
}

/* Tech stack in brackets after a project name */
.stack {
  font-style: normal;
  text-decoration: none;
  color: var(--accent);
  font-size: 13.5px;
}

/* ---------- bullets ---------- */

ul {
  margin: 5px 0 0;
  padding-left: 19px;
}

li {
  margin-bottom: 3px;
  padding-left: 2px;
}

li::marker { color: var(--ink); }

/* ---------- plain paragraphs ---------- */

.plain { margin: 4px 0 0; }
.indent { padding-left: 58px; }

/* ---------- skills ---------- */

.skills {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 16px;
}

.skills dt {
  font-weight: 700;
  color: var(--ink);
}

.skills dd { margin: 0; }

/* ---------- how this site works ---------- */

.architecture { margin-top: 24px; }

.flow {
  margin: 9px 0 0;
  padding-left: 21px;
}

.flow li { margin-bottom: 6px; }

.flow strong { color: var(--navy); }

code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  background: #eef2f7;
  padding: 1px 5px;
  border-radius: 3px;
}

a { color: var(--accent); }

/* ---------- visitor counter ---------- */

.counter {
  margin-top: 26px;
  padding: 13px 44px 0;
  border-top: 1px solid #d8dde4;
  font-size: 12.5px;
  color: #7a828d;
  text-align: center;
}

/* ============================================================
   Phones — stack the two-column rows so nothing gets squashed
   ============================================================ */

@media (max-width: 620px) {
  body { padding: 0; font-size: 14.5px; }

  .sheet { box-shadow: none; }

  .masthead { padding: 22px 22px 16px; }
  .masthead h1 { font-size: 23px; letter-spacing: 0.07em; }

  .contactbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 13px 22px;
  }

  section { padding: 0 22px; }
  .counter { padding-left: 22px; padding-right: 22px; }

  .entry-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .date { text-align: left; }

  .skills { grid-template-columns: 1fr; gap: 1px; }
  .skills dd { margin-bottom: 9px; }

  .indent { padding-left: 0; }
}

/* ============================================================
   Print — plain white, no shadow, hide the counter
   ============================================================ */

@media print {
  body { background: #fff; padding: 0; font-size: 11pt; }
  .sheet { box-shadow: none; max-width: none; }
  .counter, .architecture { display: none; }
  .contactbar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { text-decoration: none; }
}