/* Site chrome shared by the landing page and the country pages.
   Everything here used to live in v1-editorial.html's <style> block; it moved out
   when the countries got pages of their own and needed the same header, footer,
   section headings, country cards, university rows, FAQ rows and call to action.
   Page-specific layout stays in each page's own <style> / country-page.css. */

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
section { padding: 120px 0; }
/* Header */
.hdr { position: sticky; top: 0; z-index: 20; background: rgba(246,241,232,.92); backdrop-filter: blur(8px); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.hdr nav { display: flex; gap: 34px; font-size: 15px; }
.hdr nav a { text-decoration: none; opacity: .8; }
.hdr nav a:hover { opacity: 1; color: var(--terracotta); }
.hdr nav a[aria-current="page"] { opacity: 1; color: var(--terracotta); }
.hdr nav a, .hdr .logo b, .hdr .btn { white-space: nowrap; }
/* Seven links plus the button: close the gaps as the screen narrows so nothing wraps */
@media (max-width: 1320px) { .hdr nav { gap: 22px; font-size: 14px; } .hdr-right { gap: 16px; } }
@media (max-width: 1180px) { .hdr nav { gap: 16px; } .hdr .btn { padding: 11px 16px; font-size: 14px; } }
.hdr-right { display: flex; align-items: center; gap: 22px; }
.hdr .btn { padding: 12px 22px; font-size: 15px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 56px; gap: 40px; }
.sec-head h2 { font-size: 88px; }
.sec-head h2 .br { color: var(--terracotta); }
/* The Ukrainian universities heading is longer than the English one: a bit smaller so it stays on one line */
html[lang="uk"] #universities .sec-head h2 { font-size: clamp(38px, calc((100vw - 96px) / 16), 76px); }
.sec-head p { max-width: 380px; margin: 0; opacity: .75; }
/* Countries: an endless strip of cover photos (the movement is in countries-strip.js) */
.country-strip { overflow: hidden; padding: 36px 0; margin: -36px 0; } /* room for stickers that stick out */
.strip-track { display: flex; gap: 40px; width: max-content; }
/* The two open countries are links to their own page; the coming-soon ones are plain <article>s */
.country { position: relative; flex: none; display: block; width: 420px; height: 560px; text-decoration: none; color: inherit; }
.country-photo { height: 100%; border-radius: 28px; overflow: hidden; background: var(--cream-2); }
.country img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; }
.country:hover img, .country:focus-visible img { opacity: .72; }

/* Country name: a beige pill (same shape as the buttons) on a corner of the photo, sticking out a little */
.country-name {
  position: absolute; z-index: 2; white-space: nowrap;
  padding: 15px 29px; border-radius: 999px; border: 3px solid var(--terracotta);
  background: var(--cream); color: var(--terracotta);
  font-family: var(--font-body); font-weight: 600; font-size: 22px; line-height: 1;
  transform: rotate(var(--tilt));
}
/* Corners: pick one */
.country-name.at-top-left { top: -18px; left: -22px; --tilt: -12deg; }
.country-name.at-bottom-right { bottom: -18px; right: -22px; --tilt: 9deg; }

/* Mouse on the photo or the label: the label lifts a little and a shadow appears, like the form button (a bit slower) */
.anim .country-name { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.anim .country:hover .country-name, .anim .country:focus-visible .country-name {
  transform: translateY(-4px) rotate(var(--tilt));
  box-shadow: 0 14px 26px -12px rgba(42,29,20,.5);
}
/* Coming soon: a small dark tag in the middle of the photo, and the card can't be clicked */
.soon { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 12px; line-height: 1; }
/* Animations turned off: the cards stand still in the middle */
html:not(.anim) .strip-track { margin: 0 auto; }
.uni { display: grid; grid-template-columns: 84px 1fr auto; gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(42,29,20,.15); }
.uni .ph { height: 64px; border-radius: 14px; }
.uni .ph::after { display: none; }
.uni b { font-weight: 600; display: block; }
.uni small { opacity: .6; font-size: 14px; }
.uni .mono { opacity: .55; }
/* Question rows: plain text, light lines, a terracotta arrow */
.faq details { border-top: 0; border-bottom: 1px solid rgba(42,29,20,.07); padding: 26px 0; }
.faq details:last-child { border-bottom: 1px solid rgba(42,29,20,.07); }
.faq summary { align-items: center; padding: 0 16px; font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.35; }
.faq summary span { display: inline-block; }
.faq summary::after {
  content: ''; flex: none; width: 14px; height: 14px; background: var(--terracotta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 2l5 5-5 5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 2l5 5-5 5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
}
.faq details[open] summary::after { transform: none; rotate: 90deg; } /* arrow points down when open */
.faq details p { margin: 12px 16px 0; max-width: 640px; font-size: 16px; opacity: .72; }
/* Final CTA */
.cta { margin: 0 24px; border-radius: 40px; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; background: var(--terracotta); color: var(--cream); }
.cta-text { padding: 90px 80px; }
.cta h2 { font-size: 96px; margin: 24px 0 26px; }
.cta p { font-size: 19px; max-width: 480px; margin: 0 0 40px; opacity: .9; }
.cta .btn { background: var(--cream); color: var(--ink); }
.cta .btn:hover { background: #fff; }
.cta .ph { min-height: 560px; border-radius: 0; }
.cta .ph img { position: absolute; inset: 0; } /* the photo fills the space but never makes the block taller */

/* Final call to action, landing page only — "Поговорімо про ваші плани".
   Kept apart from .cta above, which the country pages still render.
   The panel runs off the right edge of the viewport, so only its bottom-left corner
   is rounded; the top-left is square because the eyebrow tab sits on it like a folder tab. */
.plans { margin-left: 48px; }
.plans-tab {
  /* block + max-content, not inline-block: an inline box would leave the line's
     descender as a sliver of page cream between the tab and the panel. */
  display: block; width: max-content; padding: 13px 24px; color: var(--ink);
  background: var(--cream); /* the page colour, so the tab reads as cut out of the panel */
  box-shadow: inset 0 0 0 1.5px rgba(42, 29, 20, .16);
}
.plans-panel {
  display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  background: var(--cream-2); color: var(--ink);
  border-radius: 0 0 0 40px; overflow: hidden;
}
/* A column rather than a plain block: the heading and the line sit at the top and the
   auto margin pushes the button to the bottom, leaving the gap in between deliberate. */
.plans-text { display: flex; flex-direction: column; padding: 56px 56px 56px 60px; }
.plans h2 { font-size: 52px; margin: 0 0 20px; }
.plans p { font-size: 18px; margin: 0 0 40px; opacity: .75; }
.plans-text .btn { margin-top: auto; align-self: flex-start; } /* flex-start, or it stretches the full column */
/* Inset from the panel at the top and the left only. It runs off the panel's bottom edge
   and off the right of the screen with it, so only the top-left corner is rounded. */
.plans-photo { margin-top: 56px; min-height: 420px; border-radius: 24px 0 0 0; }
/* Absolute so the photo never sets the row height. The card is far wider than the
   portrait source, so cover crops top and bottom: 58% down keeps the window, the lit
   shelves and the reader, and loses the ceiling and the floor. */
.plans-photo img { position: absolute; inset: 0; object-position: 50% 58%; }

/* The text column is only 38% wide, so the heading has to come down before the panel does */
@media (max-width: 1200px) {
  .plans-text { padding: 44px 40px; }
  .plans h2 { font-size: 42px; }
}
/* Narrow: the panel stops bleeding and sits in the page margins, and the photo drops
   below the text. The top-left corner stays square — the tab is still sitting on it. */
@media (max-width: 900px) {
  .plans { margin: 0 24px; }
  .plans-panel { grid-template-columns: minmax(0, 1fr); border-radius: 0 28px 28px 28px; }
  .plans h2 { font-size: 40px; }
  .plans-text .btn { margin-top: 0; }
  .plans-photo { margin-top: 0; min-height: 0; height: 320px; border-radius: 0; }
}
/* Footer */
footer { padding: 0; }

/* London skyline: the footer's own ink, so the band and the footer body read as one
   dark mass rising out of the cream page. Cut-outs are --cream, so the page shows
   through the clock face, the wheel and the windows. */
.skyline { line-height: 0; }
.skyline svg { display: block; width: 100%; height: auto; }
/* Below 1000px, proportional scaling would shrink the band past the point where the
   clock face and the Eye's spokes resolve, so pin the height and let slice crop the sides. */
@media (max-width: 1000px) { .skyline svg { height: 190px; } }

.ft-ground { background: var(--ink); color: var(--cream); padding: 90px 0 50px; }
.ft { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(246,241,232,.18); }
.ft .logo { align-items: flex-start; }
.ft .logo b { font-size: 44px; }
.ft p { opacity: .65; font-size: 15px; max-width: 300px; }
.ft h4 { font-family: var(--font-mono); font-weight: 400; font-size: 12px; opacity: .55; margin: 0 0 16px; }
.ft ul { list-style: none; margin: 0; padding: 0; }
/* colour, not opacity, so hover can win — nested opacity would just compound */
.ft li { margin-bottom: 10px; color: rgba(246,241,232,.75); }
.ft a { text-decoration: none; }
/* terracotta only clears 3.7:1 on the ink ground, short of AA, so hover is cream + rule */
.ft li a { transition: color .2s; }
.ft li a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.ft-bottom { display: flex; justify-content: space-between; padding-top: 26px; opacity: .55; }
.ft-privacy { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.ft-privacy:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Privacy policy pop-up (privacy.js): the page colour over almost the whole screen, plain text */
dialog.privacy { border: 0; padding: 0; margin: auto; border-radius: 28px; width: calc(100vw - 48px); height: calc(100vh - 48px); max-width: none; max-height: none; background: var(--cream); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
dialog.privacy::backdrop { background: rgba(42, 29, 20, .55); backdrop-filter: blur(3px); }
.privacy-close { position: sticky; top: 18px; float: right; margin: 18px 24px 0 0; font-size: 34px; z-index: 1; }
.privacy-body { max-width: 760px; margin: 0 auto; padding: 90px 32px 110px; font-size: 17px; line-height: 1.6; }
.privacy-body h2 { font-size: clamp(44px, 6vw, 72px); margin-bottom: 30px; }
.privacy-body h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin: 54px 0 16px; }
.privacy-body p { margin: 0 0 14px; }
.privacy-body ul { margin: 0 0 14px; padding-left: 22px; }
.privacy-body li { margin-bottom: 8px; }
.privacy-body li::marker { color: var(--terracotta); }
html.privacy-open { overflow: hidden; }
@media (max-width: 700px) {
  dialog.privacy { width: calc(100vw - 20px); height: calc(100vh - 20px); border-radius: 22px; }
  .privacy-body { padding: 70px 22px 80px; font-size: 16px; }
}

/* ---------- Handwritten notes with a pen-drawn arrow ---------- */
/* Used for "advice from us" on the country page and the founders' names on the landing
   page. Each page places them; this is only the look. */
.scrawl { position: absolute; font-family: 'Bad Script', cursive; font-size: 30px; line-height: 1.05; font-weight: 400; color: var(--ink); white-space: nowrap; pointer-events: none; }
.scrawl-arrow { position: absolute; height: auto; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; overflow: visible; }