:root {
  --bg: #b1d7e5;        /* page + circle */
  --card: #86c4de;      /* rectangle */
  --ink: #3a3a3a;       /* body text */
  --black: #000;        /* logo */
  --accent: #e3301c;    /* "her" link */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  min-height: 100vh;
}

.defs { position: absolute; width: 0; height: 0; }

/* ---------- Card ---------- */
.card {
  position: relative;
  width: min(100%, 1190px);
  aspect-ratio: 1190 / 843;
  background: var(--card);
  overflow: hidden;
  container-type: inline-size;
  display: flex;
  align-items: center;
}

.circle {
  position: absolute;
  width: 66.5%;
  aspect-ratio: 1 / 1;
  left: 12.4%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg);
  border-radius: 50% 47% 52% 49% / 48% 52% 47% 51%;
  filter: url(#rough-edge);
}

.content {
  position: relative;
  padding-left: 17.2%;
  padding-right: 4%;
  font-size: 3cqw;
  line-height: 1.36;
}

/* ---------- Logo ---------- */
.logo { font-size: 1em; font-weight: normal; color: var(--black); line-height: 1; margin-bottom: 0.85em; }

.logo-mark {
  display: block;
  font-size: 5.9em;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.76;
  margin-left: -0.04em;
}

.logo-sub {
  display: block;
  font-size: 1.47em;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: -0.01em;
  margin-top: 0.2em;
}

/* ---------- Text ---------- */
.exhibition p { font-weight: 700; }

.exhibition .quote { font-weight: 400; margin-bottom: 1.4em; }

.period { margin-bottom: 0.8em; }

.link {
  font-size: 1.37em;
  line-height: 1.3;
  margin-bottom: 0.7em;
}

.link a {
  color: var(--accent);
  text-decoration: none;
}
.link a:hover, .link a:focus-visible { text-decoration: underline; }

/* ---------- Footer ---------- */
.footer { font-size: 0.66em; line-height: 1.5; }

.footer address { font-style: normal; font-weight: 700; }

.footer a { color: inherit; text-decoration: none; }
.footer a:hover, .footer a:focus-visible { text-decoration: underline; }

.footer small { font-size: 1em; display: block; }

a:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  body { padding: 0; align-items: stretch; }
  .card { aspect-ratio: auto; min-height: 100vh; padding: 3rem 0; }
  .circle { width: 150%; left: -25%; }
  .content { padding: 0 1.5rem; font-size: 16px; }
  .logo-sub { white-space: normal; }
  .footer { font-size: 0.8em; }
}