@charset "utf-8";

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin.woff2") format("woff2");
}

/* The Watercolor composition is confined to the homepage. */
body.watercolor {
  --ink: #333127;
  --ink-soft: #48473d;
  --accent: #b59a63;
  --accent-deep: #806030;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  padding: 68px 0 min(44vw, 700px);
  font-family: "EB Garamond", Georgia, serif;
}

.watercolor .page {
  position: relative;
  z-index: 1;
  display: flow-root;
  width: min(100% - 96px, 680px);
  max-width: none;
  margin: 0 auto;
}

.watercolor h1 {
  margin: 0 0 24px;
  font-size: clamp(40px, 4.2vw, 58px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.watercolor .p-note {
  margin: 0;
  max-width: none;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.56;
  text-wrap: wrap;
}

.watercolor .portrait {
  float: right;
  width: 164px;
  margin: 0 0 26px 26px;
  background: var(--paper);
}

.watercolor .portrait img {
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  opacity: 0.8;
  mix-blend-mode: darken;
}

.watercolor .landscape {
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  display: block;
  width: 100%;
  pointer-events: none;
}

.watercolor .landscape img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.45;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(to bottom, transparent 15%, #000 40%, #000 84%, transparent 100%);
}

@media (min-width: 1800px) {
  .watercolor .landscape { max-width: 1800px; margin: auto; }
}

@media (max-width: 760px) {
  body.watercolor { padding: 40px 0 62vw; }
  .watercolor .page { width: min(100% - 48px, 680px); }
  .watercolor h1 { font-size: 42px; }
  .watercolor .p-note { font-size: 22px; line-height: 1.52; }
  .watercolor .portrait { width: 116px; margin: 0 0 14px 14px; }
  .watercolor .landscape { overflow: hidden; }
  .watercolor .landscape img {
    width: 155%;
    max-width: none;
    margin-left: -4%;
    mask-image: linear-gradient(to bottom, transparent 20%, #000 43%, #000 84%, transparent);
  }
}

@media (prefers-color-scheme: dark) {
  body.watercolor {
    --ink: #f3f0e8;
    --ink-soft: #c7c4bc;
    --accent: #ffb84d;
    --accent-deep: #ffd08a;
  }
  .watercolor .portrait { display: none; }
  .watercolor .landscape img { mix-blend-mode: lighten; }
}

@media print {
  body.watercolor {
    --paper: #fff;
    --ink: #000;
    --ink-soft: #000;
    --accent: #000;
    --accent-deep: #000;
    display: block;
    min-height: 0;
    padding: 0;
  }
  .watercolor .page { margin: 0; width: 100%; }
  .watercolor .landscape { display: none; }
  .watercolor .portrait img { mix-blend-mode: normal; }
}