/* Portfolio of Bogun Evgenii — static rebuild of the Framer site.
   Colors, type and spacing are taken from the published site. */

@font-face {
  font-family: "Century Schoolbook Monospace";
  src: url("../fonts/century-schoolbook-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #fbfcfe;
  --fg: #181a1b;
  --mid: #8a8b8c;
  --accent: #ffc400;
  --red: #b81b37;
  --blue: #739ff7;
  --on-color: #181a1b;
  --pad: 24px;
  --gap: 10px;
  --mono: "Century Schoolbook Monospace", "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #181a1b;
    --fg: #fbfcfe;
    --accent: #7affa1;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 500 16px/1.18 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
.meme-grid picture, .photos picture { display: block; }
/* readable by search engines and screen readers, not shown */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- top bar (fixed) ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  padding: var(--pad);
  color: var(--fg);
  pointer-events: none;
}
.bar a { pointer-events: auto; }
.bar a:hover, .bar a:focus-visible,
.next a:hover, .next a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bar .right { display: flex; gap: 10px; }
.bar .sep { font: 400 12px/1.18 "IBM Plex Mono", monospace; letter-spacing: 0.02em; align-self: center; }

main { padding: 0 var(--pad); }

/* ---------- home: intro ---------- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 188px;
}
.intro .text { width: min(690px, 100%); text-align: center; color: var(--mid); }
.intro .text .strong { color: var(--fg); }
.intro .text p + p { margin-top: 1.18em; }
.redact {
  /* the original used the block glyph; drawn as a box here so it does not depend on the font */
  display: inline-block;
  width: calc(var(--n) * 0.9346em);
  height: 1.1em;
  background: var(--mid);
  vertical-align: -0.2em;
}
.dot {
  order: 1;
  width: 24px;
  height: 24px;
  margin-top: 83px;
  border-radius: 50%;
  background: var(--accent);
}
.updated {
  order: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: 98px;
}
.updated .label { text-align: right; padding-right: 0; }
.updated .values { text-align: left; }
.updated s {
  text-decoration: line-through wavy var(--accent);
  text-decoration-skip-ink: none;
}

/* ---------- home: cards ---------- */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
  margin-top: 58px;
}
.card { position: relative; display: block; overflow: hidden; }
.card .cover { width: 100%; height: 100%; object-fit: cover; }
.card .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36.2%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- home: big buttons ---------- */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: var(--gap);
  margin-top: 156px;
}
.pill {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 1000px;
  corner-shape: superellipse(1.5); /* Chromium; other browsers fall back to a round pill */
  padding: 0;
  color: var(--on-color);
  font: inherit;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.pill span { display: block; font-size: inherit; line-height: 1.18; } /* same size as the body text */
.pill.mail  { background: var(--accent); grid-column: 1; grid-row: 1; }
.pill.copy  { background: var(--red);    grid-column: 1; grid-row: 2; }
.pill.cv    { background: var(--blue);   grid-column: 2; grid-row: 1 / 3; }
/* hover: the original snaps instantly; raise --hover-speed (e.g. .15s) for a soft ease */
.pill { --hover-speed: 0s; transition: transform var(--hover-speed) ease-out; will-change: transform; }
.pill.mail:hover, .pill.mail:focus-visible { transform: rotate(-3deg) scale(0.95); }
/* View CV: one full turn plus 3 degrees, animated */
/* View CV is a plain capsule (the other two keep the squircle corners) */
.pill.cv { --hover-speed: 0.7s; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); corner-shape: round; border-radius: 9999px; }
.pill.cv:hover, .pill.cv:focus-visible { transform: rotate(363deg) scale(0.95); }
.pill.copy:hover, .pill.copy:focus-visible { transform: matrix(0.99561, 0.175553, 0.164966, 0.935567, 0, 0); }

.about {
  width: 328px;
  margin: 156px auto 0;
  padding-bottom: 159px;
  color: var(--mid);
  white-space: pre;
}

/* ---------- project page ---------- */
main.project { padding-top: 67px; }
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px;
  overflow: hidden;
  color: var(--on-color);
}
.hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero > :not(picture) { position: relative; z-index: 1; }
.hero .title { text-align: center; }
.hero .desc { margin-top: 108px; text-align: center; min-height: 0; }
.hero .meta { margin-top: 19px; display: flex; flex-direction: column; }
.hero .discipline { text-align: left; }
.hero .year { text-align: right; }
.photos { display: grid; gap: 12px; margin-top: 12px; }
.photos img { width: 100%; height: auto; }
.next {
  margin-top: 104px;
  padding-bottom: 24px;
  text-align: right;
  font: 500 44px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: -0.035em;
  text-transform: none;
}

/* ---------- meme page ---------- */
.meme main { padding: 0 10px 60px; position: relative; }
.meme-text {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 568px;
  text-align: center;
  font: 400 12px/1.18 "IBM Plex Mono", monospace;
  letter-spacing: 0.02em;
  color: var(--mid);
}
.meme-text .label { color: var(--fg); }
.meme-text .avail { margin-top: 0; }
.meme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: start;
  padding-top: 139px;
}
.meme-grid .spacer { position: relative; height: 615px; }
.meme-grid .spacer .dot { position: absolute; left: 0; top: -29px; margin: 0; }
.meme-grid img { width: 100%; height: auto; }

/* ---------- tablet ---------- */
@media (max-width: 1199px) and (min-width: 810px) {
  .bar { padding: 24px; }
}

/* ---------- mobile ---------- */
@media (max-width: 809px) {
  :root { --pad: 12px; --gap: 12px; }
  .bar { padding: 24px 24px; }
  .intro { margin-top: 82px; align-items: stretch; }
  .intro .text { text-align: left; width: 100%; }
  .dot { order: -1; margin: 0 auto 28px; }
  .updated { margin-top: 70px; }
  .cards { grid-template-columns: 1fr; margin-top: 58px; }
  .card .logo { width: 46.2%; }
  .actions { grid-template-columns: 1fr; grid-template-rows: none; margin-top: 156px; gap: 10px; }
  .pill.mail, .pill.copy, .pill.cv { grid-column: 1; grid-row: auto; }
  .pill.mail { height: 135px; }
  .pill.copy { height: 135px; }
  .pill.cv   { height: 164px; }
  .about { width: 100%; margin-top: 146px; padding-bottom: 147px; }
  .next { font-size: 30px; margin-top: 64px; }
  .hero .desc { margin-top: 60px; }
  .meme-text { position: static; width: auto; padding: 72px 2px 0; text-align: left; }
  .meme-grid { grid-template-columns: 1fr 1fr; padding-top: 24px; }
  .meme-grid .spacer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pill:hover, .pill:focus-visible { transform: none !important; }
}