/* ALX VIBES — portfolio site
   Layout: one 1680px content column (Figma desktop frame 1920 with 120px margins),
   sizes scale with the screen via --k; under 768px the mobile design (393px frame) takes over. */

:root {
  --black: #000000;
  --white: #ffffff;
  --ink: #231f20;        /* category titles */
  --field: #d9d9d9;      /* form fields */
  --display: "Climate Crisis", "Arial Black", Impact, sans-serif;
  --body: "Alumni Sans", "Arial Narrow", Arial, sans-serif;
  /* 1 design pixel of the 1920 frame, never bigger than 1px */
  --k: min(1px, calc(100vw / 1920));
  --gutter: max(16px, calc(var(--k) * 120));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.on-dark :focus-visible, .footer :focus-visible { outline-color: var(--white); }

.display {
  font-family: var(--display);
  font-variation-settings: "YEAR" 1979;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: calc(1680px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rule { border: 0; border-top: 1px solid var(--black); margin: 0; }

/* ---------- Header ---------- */
.header { padding-top: calc(var(--k) * 53); }
.header__bar {
  display: flex;
  align-items: center;
  gap: calc(var(--k) * 40);
  padding-bottom: calc(var(--k) * 31);
  border-bottom: 1px solid var(--black);
}
.header__logo img { width: max(90px, calc(var(--k) * 143)); height: auto; }
.nav {
  display: flex;
  gap: calc(var(--k) * 190);
  margin-left: calc(var(--k) * 220);
}
.nav a {
  font-family: var(--display);
  font-variation-settings: "YEAR" 1979;
  font-size: max(13px, calc(var(--k) * 24));
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity .2s;
}
.nav a:hover { opacity: .55; }

/* ---------- Home: hero ---------- */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-block: calc(var(--k) * 33) calc(var(--k) * 32);
  border-bottom: 1px solid var(--black);
}
.hero__title { font-size: calc(var(--k) * 96); line-height: 1.2; padding-top: calc(var(--k) * 22); align-self: flex-start; }
.hero__art { display: flex; align-items: flex-end; gap: calc(var(--k) * 20); margin-right: calc(var(--k) * 177); }
.hero__girl { width: calc(var(--k) * 179); height: auto; }
.hero__cat { width: calc(var(--k) * 163); height: auto; }

/* ---------- Section titles ---------- */
.section-title { font-size: max(20px, calc(var(--k) * 40)); text-align: center; }

/* ---------- Home: My works ---------- */
.my-works { padding-block: calc(var(--k) * 43) calc(var(--k) * 74); border-bottom: 1px solid var(--black); scroll-margin-top: 16px; }
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--k) * 46) calc(var(--k) * 90);
  margin-top: calc(var(--k) * 62);
}
.cat-btn {
  display: grid;
  place-items: center;
  height: calc(var(--k) * 134);
  min-height: 44px;
  background: var(--black);
  color: var(--white);
  font-size: max(16px, calc(var(--k) * 40));
  transition: background .2s, color .2s;
  border: 1px solid var(--black);
}
.cat-btn:hover { background: var(--white); color: var(--black); }

/* ---------- Home: About me ---------- */
.about {
  display: grid;
  grid-template-columns: calc(var(--k) * 693) 1fr;
  padding-block: calc(var(--k) * 41) calc(var(--k) * 41);
  border-bottom: 1px solid var(--black);
  scroll-margin-top: 16px;
}
.about__face { width: calc(var(--k) * 397); height: auto; margin-left: calc(var(--k) * 106); }
.about__text { max-width: calc(var(--k) * 800); min-width: 0; }
.about__title { font-size: max(20px, calc(var(--k) * 40)); }
.about__copy { font-weight: 500; font-size: max(15px, calc(var(--k) * 24)); line-height: 1.2; margin-top: calc(var(--k) * 52); }
.about__copy p { margin: 0; }
.about__copy p + p.gap { margin-top: 1.2em; }

/* ---------- More works carousel ---------- */
.more { padding-top: calc(var(--k) * 41); padding-bottom: calc(var(--k) * 95); }
.more .section-title { margin-bottom: calc(var(--k) * 66); }
.carousel {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.carousel__track {
  display: flex;
  width: max-content;
  animation: marquee var(--duration, 60s) linear infinite;
}
/* always moving by itself; stops while the cursor is over it (computer) or while a finger holds it (phone) */
@media (hover: hover) { .carousel:hover .carousel__track, .carousel:focus-within .carousel__track { animation-play-state: paused; } }
.carousel.is-paused .carousel__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.carousel__item {
  flex: none;
  width: calc(var(--k) * 342);
  min-width: 150px;
  aspect-ratio: 342 / 409;
  margin-right: calc(var(--k) * 112);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--white);
}
.carousel__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.carousel__item.contain img { object-fit: contain; padding: 8%; }
.carousel__item:hover img { transform: scale(1.04); }

/* ---------- Footer / contact ---------- */
.footer {
  background: var(--black);
  color: var(--white);
  padding-block: calc(var(--k) * 103) calc(var(--k) * 88);
  scroll-margin-top: 0;
}
.footer .section-title { color: var(--white); }
.contact-form {
  width: min(100%, calc(var(--k) * 730));
  min-width: min(100%, 300px);
  margin: calc(var(--k) * 120) auto 0;
  display: grid;
  gap: calc(var(--k) * 21);
}
.field {
  display: block;
  width: 100%;
  height: max(34px, calc(var(--k) * 54));
  background: var(--field);
  border: 2px solid transparent;
  border-radius: 0;
  padding: 0 calc(var(--k) * 21);
  padding-inline: max(12px, calc(var(--k) * 21));
  color: var(--black);
  font-family: var(--display);
  font-variation-settings: "YEAR" 1979;
  font-size: max(11px, calc(var(--k) * 20));
  letter-spacing: .01em;
  text-transform: uppercase;
  -webkit-appearance: none;
          appearance: none;
}
.field::placeholder { color: var(--black); opacity: 1; }
.field:focus { outline: none; border-color: var(--white); }
.field.is-invalid { border-color: #ff4d4d; }
.error-msg { color: #ff8080; font-family: var(--body); font-size: max(14px, calc(var(--k) * 22)); min-height: 1.2em; margin: -6px 0 0; }

/* custom dropdown */
.select { position: relative; }
.select__button { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.select__button img { width: max(12px, calc(var(--k) * 21)); height: auto; transition: transform .2s; }
.select.is-open .select__button img { transform: rotate(180deg); }
.select__list {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 5;
  margin: 0;
  padding: max(6px, calc(var(--k) * 8)) 0 max(8px, calc(var(--k) * 14));
  list-style: none;
  background: var(--field);
  color: var(--black);
  border-top: 1px solid rgba(0,0,0,.25);
}
.select__list li {
  font-family: var(--display);
  font-variation-settings: "YEAR" 1979;
  font-size: max(10px, calc(var(--k) * 16));
  padding: max(7px, calc(var(--k) * 9)) max(30px, calc(var(--k) * 60));
  cursor: pointer;
}
.select__list li:hover, .select__list li.is-active { background: #c6c6c6; }
.select__list li[aria-selected="true"]::before { content: "• "; }

.send {
  justify-self: center;
  margin-top: calc(var(--k) * 6);
  width: max(80px, calc(var(--k) * 118));
  height: max(28px, calc(var(--k) * 39));
  background: var(--field);
  color: var(--black);
  font-family: var(--display);
  font-variation-settings: "YEAR" 1979;
  font-size: max(11px, calc(var(--k) * 20));
  transition: background .2s;
}
.send:hover { background: var(--white); }
.send[disabled] { opacity: .5; cursor: wait; }
.form-done {
  text-align: center;
  font-family: var(--display);
  font-variation-settings: "YEAR" 1979;
  font-size: max(14px, calc(var(--k) * 24));
  line-height: 1.5;
  margin: calc(var(--k) * 120) auto 0;
  max-width: 34ch;
}
.form-done small { display: block; font-family: var(--body); font-size: .8em; opacity: .7; margin-top: .6em; }
.hp { position: absolute; left: -9999px; }

.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--k) * 40);
  margin-top: calc(var(--k) * 78);
}
.socials a { transition: opacity .2s; }
.socials a:hover { opacity: .6; }
.socials .i-linkedin, .socials .i-phone { width: max(32px, calc(var(--k) * 69)); height: auto; }
.socials .i-mail { width: max(40px, calc(var(--k) * 89)); height: auto; }

/* ---------- Category pages ---------- */
.cat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: calc(var(--k) * 37) calc(var(--k) * 57);
  border-bottom: 1px solid var(--black);
}
.cat-head__left { display: flex; align-items: center; gap: calc(var(--k) * 19); }
.back { display: grid; place-items: center; width: max(28px, calc(var(--k) * 52)); height: max(28px, calc(var(--k) * 52)); }
.back svg { width: 100%; height: auto; }
.back:hover { opacity: .55; }
.cat-title { font-size: max(28px, calc(var(--k) * 64)); color: var(--ink); line-height: 1.06; }
.cat-links { display: flex; gap: calc(var(--k) * 13); flex-wrap: wrap; }
.cat-links a {
  font-size: max(20px, calc(var(--k) * 48));
  line-height: 1;
  padding-bottom: calc(var(--k) * 10);
  border-bottom: 1px solid var(--black);
  transition: opacity .2s;
}
.cat-links a:hover { opacity: .55; }

.work {
  display: grid;
  grid-template-columns: calc(var(--k) * 564) 1fr;
  border-bottom: 1px solid var(--black);
}
.work--flip { grid-template-columns: 1fr calc(var(--k) * 561); }
.work--flip .work__media { order: 2; border-left: 1px solid var(--black); border-right: 0; }
.work__media {
  border-right: 1px solid var(--black);
  display: grid;
  place-items: center;
  padding: 0 calc(var(--k) * 20);
  min-height: calc(var(--k) * 533);
}
.work__media a { display: block; width: 100%; }
.work__img {
  margin-inline: auto;
  width: 100%;
  max-height: calc(var(--k) * 532);
  object-fit: contain;
  filter: grayscale(1);
  transition: filter .5s ease;
}
.work__media a:hover .work__img,
.work__media a:focus-visible .work__img,
.work.in-view .work__img { filter: grayscale(0); }
.work__body {
  padding: calc(var(--k) * 50) calc(var(--k) * 40) calc(var(--k) * 50) calc(var(--k) * 38);
  min-width: 0;
}
.work--flip .work__body { padding-left: calc(var(--k) * 7); padding-right: calc(var(--k) * 60); }
.work__name { font-size: max(16px, calc(var(--k) * 24)); }
.work__desc {
  font-size: max(17px, calc(var(--k) * 32));
  line-height: 1.2;
  margin: calc(var(--k) * 27) 0 0;
  max-width: calc(var(--k) * 1020);
}
.arrow-btn {
  display: inline-grid;
  place-items: center;
  width: max(40px, calc(var(--k) * 62));
  height: max(40px, calc(var(--k) * 62));
  border-radius: 50%;
  background: var(--black);
  margin-top: calc(var(--k) * 30);
  transition: transform .2s;
}
.arrow-btn svg { width: 42%; height: auto; }
.arrow-btn:hover { transform: rotate(45deg); }

/* ---------- Portfolio page ---------- */
.pf-intro {
  display: grid;
  grid-template-columns: calc(var(--k) * 521) 1fr;
  padding-block: calc(var(--k) * 74) calc(var(--k) * 55);
  border-bottom: 1px solid var(--black);
}
.pf-photo { width: calc(var(--k) * 376); aspect-ratio: 376 / 495; object-fit: cover; object-position: 50% 100%; margin-left: calc(var(--k) * 14); background: #eee; }
.pf-name { font-size: max(28px, calc(var(--k) * 64)); line-height: 1.06; }
.pf-bio { font-size: max(17px, calc(var(--k) * 36)); line-height: 1.2; margin-top: calc(var(--k) * 40); }
.pf-bio p { margin: 0; }
.pf-grid { display: grid; grid-template-columns: calc(var(--k) * 1104) 1fr; }
.pf-col-l { border-right: 1px solid var(--black); }
.pf-block { padding-block: calc(var(--k) * 40); }
.pf-block + .pf-block { border-top: 1px solid var(--black); }
.pf-h { font-size: max(18px, calc(var(--k) * 36)); }
.pf-list { list-style: none; margin: calc(var(--k) * 30) 0 0; padding: 0; display: grid; gap: calc(var(--k) * 40); }
.pf-list li { display: grid; grid-template-columns: calc(var(--k) * 51) 1fr; font-size: max(17px, calc(var(--k) * 36)); line-height: 1.2; padding-right: calc(var(--k) * 40); }
.dot { width: max(12px, calc(var(--k) * 26)); height: max(12px, calc(var(--k) * 26)); border-radius: 50%; background: var(--black); margin-top: .25em; }
.pf-col-r { padding-left: calc(var(--k) * 34); }
.skills { list-style: none; padding: 0; margin: calc(var(--k) * 50) 0 0; display: grid; gap: calc(var(--k) * 34); }
.skills li { font-size: max(17px, calc(var(--k) * 36)); }
.bar { width: min(100%, calc(var(--k) * 485)); height: max(20px, calc(var(--k) * 43)); border: 1px solid var(--black); padding: calc(var(--k) * 7); margin-top: 6px; }
.bar span { display: block; height: 100%; background: var(--black); }
.langs { list-style: none; padding: 0; margin: calc(var(--k) * 40) 0 0; display: grid; gap: calc(var(--k) * 30); }
.langs li { display: flex; align-items: center; gap: calc(var(--k) * 14); font-size: max(17px, calc(var(--k) * 36)); }
.edu-school { font-weight: 600; font-size: max(17px, calc(var(--k) * 36)); margin: calc(var(--k) * 16) 0 0; }
.pf-contacts { display: flex; flex-wrap: wrap; gap: 12px calc(var(--k) * 60); padding-block: calc(var(--k) * 40); border-top: 1px solid var(--black); font-size: max(17px, calc(var(--k) * 36)); }
.pf-contacts a { display: flex; align-items: center; gap: calc(var(--k) * 12); }
.pf-contacts a:hover { text-decoration: underline; }

/* ---------- Work page (stub until designs are wired) ---------- */
.wp-head { display: flex; align-items: center; gap: calc(var(--k) * 19); padding-block: calc(var(--k) * 37) calc(var(--k) * 57); border-bottom: 1px solid var(--black); }
.wp-body { padding-block: calc(var(--k) * 55); border-bottom: 1px solid var(--black); display: grid; gap: calc(var(--k) * 50); }
.wp-cover { max-width: min(100%, 700px); max-height: 80vh; object-fit: contain; }

/* ============ MOBILE (Figma 393 frame) ============ */
@media (max-width: 767px) {
  :root { --m: min(1.25px, calc(100vw / 393)); --gutter: calc(var(--m) * 26); }
  .header { padding-top: calc(var(--m) * 54); }
  .header__bar { justify-content: space-between; align-items: center; padding-bottom: calc(var(--m) * 14); }
  .header__logo img { width: calc(var(--m) * 110); }
  .nav { flex-direction: column; align-items: flex-end; gap: calc(var(--m) * 9); margin-left: 0; }
  .nav a { font-size: calc(var(--m) * 12); }

  .hero { align-items: center; padding-block: calc(var(--m) * 16) calc(var(--m) * 5); }
  .hero__title { font-size: calc(var(--m) * 48); padding-top: 0; }
  .hero__art { margin-right: calc(var(--m) * 14); gap: calc(var(--m) * 5); }
  .hero__girl { width: calc(var(--m) * 44); }
  .hero__cat { width: calc(var(--m) * 40); }

  .section-title, .about__title { font-size: calc(var(--m) * 24); }
  .my-works { padding-block: calc(var(--m) * 19) calc(var(--m) * 23); }
  .cat-grid { grid-template-columns: 1fr; width: calc(var(--m) * 261); margin: calc(var(--m) * 20) auto 0; gap: calc(var(--m) * 13); }
  .cat-btn { height: calc(var(--m) * 44); min-height: 0; font-size: calc(var(--m) * 20); }
  /* mobile order from the design: posters, ux/ui, illustration, branding */
  .cat-btn--ux { order: 2; } .cat-btn--ill { order: 3; } .cat-btn--br { order: 4; } .cat-btn--po { order: 1; }

  .about { grid-template-columns: 1fr 1.45fr; column-gap: calc(var(--m) * 16); padding-block: calc(var(--m) * 10) calc(var(--m) * 24); }
  .about__title { grid-column: 1 / -1; text-align: center; margin-bottom: calc(var(--m) * 27); }
  .about__face { width: 100%; margin: calc(var(--m) * 40) 0 0; }
  .about__copy { font-size: calc(var(--m) * 16); margin-top: 0; }

  .more { padding-top: calc(var(--m) * 15); padding-bottom: calc(var(--m) * 24); }
  .more .section-title { margin-bottom: calc(var(--m) * 16); }
  .carousel__item { width: calc(var(--m) * 150); min-width: 0; margin-right: calc(var(--m) * 14); }

  .footer { padding-block: calc(var(--m) * 24) calc(var(--m) * 26); }
  .footer .section-title { font-size: calc(var(--m) * 12); }
  .contact-form { width: 100%; min-width: 0; margin-top: calc(var(--m) * 22); gap: calc(var(--m) * 12); }
  .footer .wrap { padding-inline: calc(var(--m) * 9); }
  .field { height: calc(var(--m) * 28); font-size: calc(var(--m) * 12); padding-inline: calc(var(--m) * 42) 12px; }
  .select__button { padding-right: calc(var(--m) * 14); }
  .select__button img { width: calc(var(--m) * 10); }
  .select__list li { font-size: calc(var(--m) * 10); padding: calc(var(--m) * 6) calc(var(--m) * 58); }
  .send { width: calc(var(--m) * 90); height: calc(var(--m) * 28); font-size: calc(var(--m) * 12); margin-top: calc(var(--m) * 1); }
  .error-msg { font-size: 14px; margin: 0; }
  .form-done { font-size: 15px; margin-top: 22px; }
  .socials { gap: calc(var(--m) * 26); margin-top: calc(var(--m) * 26); }
  .socials .i-linkedin, .socials .i-phone { width: calc(var(--m) * 26); }
  .socials .i-mail { width: calc(var(--m) * 32); }

  .cat-head { flex-direction: column; align-items: flex-start; gap: calc(var(--m) * 14); padding-block: calc(var(--m) * 20); }
  .back { width: calc(var(--m) * 26); height: calc(var(--m) * 26); }
  .cat-title { font-size: calc(var(--m) * 32); }
  .cat-links { gap: calc(var(--m) * 14); }
  .cat-links a { font-size: calc(var(--m) * 22); padding-bottom: 2px; }

  .work, .work--flip { grid-template-columns: 1fr; padding-block: calc(var(--m) * 24); }
  .work__media, .work--flip .work__media { order: 0; border: 0; padding: 0; min-height: 0; }
  .work__img { max-height: calc(var(--m) * 360); }
  .work__body, .work--flip .work__body { padding: calc(var(--m) * 16) 0 0; }
  .work__name { font-size: calc(var(--m) * 16); }
  .work__desc { font-size: calc(var(--m) * 17); margin-top: calc(var(--m) * 10); }
  .arrow-btn { width: calc(var(--m) * 40); height: calc(var(--m) * 40); margin-top: calc(var(--m) * 14); }

  .pf-intro { grid-template-columns: 1fr; gap: calc(var(--m) * 20); padding-block: calc(var(--m) * 24); }
  .pf-photo { width: 70%; margin: 0 auto; }
  .pf-name { font-size: calc(var(--m) * 30); }
  .pf-bio { font-size: calc(var(--m) * 18); margin-top: calc(var(--m) * 14); }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-col-l { border-right: 0; }
  .pf-col-r { padding-left: 0; border-top: 1px solid var(--black); }
  .pf-block { padding-block: calc(var(--m) * 22); }
  .pf-h { font-size: calc(var(--m) * 20); }
  .pf-list li, .skills li, .langs li, .edu-school, .pf-contacts { font-size: calc(var(--m) * 18); }
  .pf-list { gap: calc(var(--m) * 16); margin-top: calc(var(--m) * 14); }
  .pf-list li { grid-template-columns: calc(var(--m) * 26) 1fr; padding-right: 0; }
  .dot { width: calc(var(--m) * 12); height: calc(var(--m) * 12); }
  .skills, .langs { gap: calc(var(--m) * 14); margin-top: calc(var(--m) * 14); }
  .bar { height: calc(var(--m) * 20); padding: calc(var(--m) * 3); }
  .pf-contacts { flex-direction: column; padding-block: calc(var(--m) * 22); }

  .wp-head { padding-block: calc(var(--m) * 20); }
}

@media (max-width: 767px) {
  .about__text { display: contents; }
  .about__title { grid-row: 1; }
  .about__face { grid-row: 2; grid-column: 1; }
  .about__copy { grid-row: 2; grid-column: 2; }
}
.error-msg:empty { display: none; }
@media (max-width: 767px) {
  .work__desc { max-width: none; }
  .pf-photo { width: 62%; }
}

/* ---------- Project pages: Figma layout (desktop / mobile) ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.project { position: relative; width: 100%; max-width: 1920px; margin-inline: auto; aspect-ratio: var(--ar-d); }
.project__canvas, .project__canvas > svg:not(.pj-defs), .project__canvas .pj-band > svg { display: block; width: 100%; height: auto; }
.project__back { position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 4px; }
.project__back--m { display: none; }
.project__back:focus-visible { outline: 2px solid var(--black); }
@media (max-width: 767px) {
  .project { aspect-ratio: var(--ar-m); }
  .project__back--d { display: none; }
  .project__back--m { display: grid; }
  .project__back--draw svg { width: 70%; }
}

/* ---------- Project pages: Figma graphics in bands + real text ---------- */
.project { container-type: inline-size; aspect-ratio: auto; direction: ltr; }
.project:not(.is-loaded) { aspect-ratio: var(--ar-d); }
@media (max-width: 767px) { .project:not(.is-loaded) { aspect-ratio: var(--ar-m); } }
.pj-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pj-band { position: relative; }
.pj-band--svg, .pj-band--mix { display: grid; }
.pj-band > svg, .pj-band > .ptext { grid-area: 1 / 1; }
.pj-band > svg { display: block; width: 100%; height: auto; overflow: visible; }
.pj-band--text { display: flow-root; }
.pj-link { position: absolute; z-index: 3; border-radius: 4px; }
.pj-link:hover { background: rgba(0,0,0,.04); }

.ptext { align-self: start; justify-self: start; position: relative; z-index: 2; color: var(--black);
  font-family: var(--body); font-weight: 400; font-size: calc(32 / 1920 * 100cqw); line-height: 1.2; }
.ptext h3 { font: inherit; font-weight: 700; margin: 1em 0 .15em; }
.ptext h3:first-child { margin-top: 0; }
.ptext h3 .sub { font-weight: 400; }
.ptext p { margin: 0; }
.ptext p + p { margin-top: .55em; }
.ptext ul, .ptext ol { margin: .35em 0 0; padding-left: 1.5em; }
.ptext li + li { margin-top: .2em; }
.ptext li::marker { font-weight: 700; }
.ptext a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.ptext a:hover { text-decoration-thickness: 2px; }
.pt-he { direction: rtl; text-align: right; }
.pt-he ul, .pt-he ol { padding-left: 0; padding-right: 1.5em; }
body:not(.he) .pt-he, body.he .pt-en { display: none; }
/* reading aid: the paragraph under the cursor turns bolder and slightly bigger (no reflow) */
.ptext p, .ptext li { transform-origin: left center; transition: transform .45s cubic-bezier(.2,.7,.2,1), -webkit-text-stroke-width .3s; -webkit-text-stroke: 0 currentColor; }
.pt-he p, .pt-he li { transform-origin: right center; }
@media (hover: hover) {
  .ptext p:hover, .ptext li:hover { -webkit-text-stroke-width: .022em; transform: scale(1.018); }
}
@media (max-width: 767px) {
  .ptext { font-size: calc(16 / 393 * 100cqw); }
}
@media (prefers-reduced-motion: reduce) { .ptext p, .ptext li { transition: none; } }