/* De Facto IAS (Main): sizes and colours copied from the Wix site (980px page, blue #3d9be9). */
:root {
  --blue: #3d9be9;
  --ink: #272633;
  --text: #393838;
  --mint: #b5f3da;
  --footer: #858585;
  --footer-band: #cccccc;
  --tab: #efefef;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: #000; }
body { font-family: Helvetica, Arial, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { width: 980px; max-width: 100%; margin: 0 auto; position: relative; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 6px 10px; z-index: 10; }

/* Header */
.site-header { height: 95px; }
.site-header .wrap { height: 95px; }
.logo { position: absolute; left: -85px; top: 3px; width: 77px; height: 77px; }
.brand { position: absolute; left: 0; top: 6px; margin: 0; font: 900 30px/1.1 Montserrat, sans-serif; color: var(--ink); text-decoration: none; letter-spacing: -0.2px; }
.brand span { color: var(--blue); }
.telegram { position: absolute; left: 10px; top: 49px; display: flex; align-items: center; gap: 10px; font: italic 700 15px Montserrat, sans-serif; color: #000; }
.telegram img { width: 26px; height: 26px; }
.nav { position: absolute; left: 188px; top: 49px; width: 787px; display: flex; margin: 0; padding: 0; list-style: none; }
.nav li { flex: 1; }
.nav a { display: block; height: 32px; text-align: center; background: var(--tab); color: #000; font: 700 17px/32px Helvetica, Arial, sans-serif; text-decoration: none; }
.nav a:hover { background: #dcdcdc; }
.nav a[aria-current="page"] { background: var(--blue); color: #fff; }

/* Home */
.visit { margin: 45px 0 0 62px; }
.visit p { margin: 0 0 56px; font-size: 32px; line-height: 40px; color: var(--text); }
.visit p:first-child { color: #000; }
.visit a { color: var(--blue); }
.poster { width: 786px; margin: 0 auto 32px; }

/* Courses */
.card { position: relative; background: var(--mint); height: 414px; margin-top: 52px; }
.card .side { position: absolute; left: 22px; top: 0; width: 40px; height: 100%; }
.card .side h2 { position: absolute; left: 50%; top: 48px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; margin: 0; font: 400 22px Jost, "Futura", sans-serif; color: #333; white-space: nowrap; }
.card .side::before { content: ""; position: absolute; left: 50%; top: 286px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: #333; }
.card .side::after { content: ""; position: absolute; left: 50%; top: 300px; width: 1px; height: 82px; background: #333; }
.card .intro { position: absolute; left: 103px; top: 36px; width: 445px; margin: 0; font: 400 18px/1.5 Jost, "Futura", sans-serif; color: #333; }
.card .btns { position: absolute; left: 103px; top: 177px; display: grid; gap: 42px 0; grid-template-rows: 40px 40px 40px; row-gap: 42px; }
.card .btns a { display: block; width: 256px; height: 40px; text-align: center; background: #fff; border: 1px solid #000; font: 700 18px/38px "Playfair Display", serif; color: #000; text-decoration: none; }
.card .btns a:nth-child(3) { margin-top: -7px; }
.card .btns a:hover { background: #000; color: #fff; }
.card .art { position: absolute; right: 0; top: 0; width: 384px; }
.after-card { margin: 33px 0 0 27px; font: 400 20px/1.4 "Noto Serif", serif; }
.after-card p { margin: 0 0 19px; }
.after-card a { color: #868383; text-decoration: none; }

/* Privacy */
.privacy { margin: 52px 0 0 48px; min-height: 780px; font: 400 20px "Noto Serif", serif; color: #868383; }
.privacy h1 { font: inherit; margin: 0; }

/* Footer */
.site-footer { background: var(--footer-band); margin-top: 32px; }
.site-footer .wrap { background: var(--footer); height: 60px; display: flex; align-items: center; justify-content: center; color: #fff; font: 400 18px Spinnaker, sans-serif; text-align: center; padding: 0 12px; }

/* Laptops too narrow for the logo hanging outside the 980px page: pull it inside. */
@media (max-width: 1160px) and (min-width: 1001px) {
  .logo { left: 0; }
  .brand { left: 85px; }
  .telegram { left: 95px; }
  .nav { left: 273px; width: 707px; }
}

/* Phones and small tablets */
@media (max-width: 1000px) {
  .site-header, .site-header .wrap { height: auto; }
  .site-header .wrap { display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px; padding: 10px 16px 0; }
  .logo, .brand, .telegram, .nav { position: static; }
  .logo { width: 64px; height: 64px; grid-row: span 2; }
  .brand { font-size: 26px; align-self: end; }
  .telegram { align-self: start; margin-left: 2px; white-space: nowrap; }
  .nav { grid-column: 1 / -1; width: auto; margin-top: 10px; }
  .visit { margin: 32px 16px 0; }
  .visit p { font-size: 22px; line-height: 30px; margin-bottom: 30px; }
  .poster { width: calc(100% - 32px); margin: 0 16px 24px; }
  .card { height: auto; margin: 24px 16px 0; padding: 24px 20px 24px 64px; }
  .card .side h2 { top: 24px; font-size: 18px; }
  .card .side::before, .card .side::after { display: none; }
  .card .intro, .card .btns, .card .art { position: static; width: auto; }
  .card .btns { margin: 20px 0; row-gap: 14px; }
  .card .btns a { width: 100%; max-width: 280px; }
  .card .btns a:nth-child(3) { margin-top: 0; }
  .card .art { margin-top: 8px; }
  .after-card { margin: 24px 16px 0; font-size: 17px; }
  .privacy { margin: 32px 16px 0; min-height: 50vh; }
  .site-footer .wrap { height: auto; min-height: 60px; font-size: 15px; }
}