/* Marina Dittrich — vivid three-artwork homepage, 2026-10-25.
   The watercolor is the FULL original PNG, not an AI webpage mockup.
   A smaller WebP alternative is included but not used by default.
   There are no page-wide overlays or opaque cards. Captions alone get a soft,
   feathered local halo for readable artwork titles and gallery links.

   To soften the WHOLE watercolor uniformly later, change only:
      --watercolor-fade: 0;   (vivid original)
   to --watercolor-fade: .08; (8% white wash), for example.
   This never changes Marina's actual artwork, logo, header or footer.
*/

* {box-sizing:border-box;}
html { min-height:100%; }
body.md-vivid-home {
  --watercolor-fade: 0.60;
  --caption-halo-opacity: 1; /* independently adjusts only the three localized caption fades */
  --connection-focus-y: 80%; /* slightly lower to retain Connection's black orca */
  --deeper-focus-y: 60%; /* balance Deeper's lower blue form and its upper pattern */
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  color:#13283a;
  background-color:#dcecf6;
  background-image:url('images/vivid-watercolor.webp');
  background-position:center center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* Completely invisible at the default value of 0. Raises lightness evenly if requested. */
.md-vivid-home::before {
  content:"";
  position:fixed;
  inset:0;
  background:#fff;
  opacity:var(--watercolor-fade);
  pointer-events:none;
  z-index:0;
}

/* Reuse the published home page's nav/footer structure and contact information. */
.md-vivid-home .site-header {
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(9,24,38,.90);
  color:#fff;
  box-shadow:none;
}
.md-vivid-home .nav-container {
  width:min(100%,1520px);max-width:1520px;
  margin:auto;padding:10px 18px;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,3.6vw,52px);
  flex-wrap:wrap;
}
.md-vivid-home .nav-main {
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2.5vw,35px);flex-wrap:wrap;
}
.md-vivid-home .nav-link {
  display:inline-block;color:white;text-decoration:none;
  font:600 clamp(12px,.92vw,16px)/1.35 system-ui,-apple-system,sans-serif;
  letter-spacing:0;
  white-space:nowrap;
}
.md-vivid-home .nav-link:hover,.md-vivid-home .nav-link:focus-visible {text-decoration:underline;}
.md-vivid-home .nav-link.is-current {
  text-decoration:underline;text-decoration-color:#e9b150;
  text-decoration-thickness:2px;text-underline-offset:9px;
}
.md-vivid-home .language-switch {margin-left:clamp(0px,2vw,28px);opacity:1;}
.md-vivid-home .site-info-bar {
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:12px;min-height:42px;padding:8px 16px;
  background:rgba(9,24,38,.89);
  color:white;
  font:15px/1.3 system-ui,-apple-system,sans-serif;
  letter-spacing:0;text-align:center;box-shadow:none;
}
.md-vivid-home .site-info-bar a {color:inherit;text-decoration:none;}
.md-vivid-home .site-info-bar a:hover {text-decoration:underline;}
.md-vivid-home .site-info-bar span+span::before {
  content:'•';width:auto;height:auto;display:inline;margin:0 14px 0 0;
  background:transparent;border-radius:0;vertical-align:baseline;
}

/* ONLY transparent foreground elements over one continuous watercolor background. */
.md-vivid-home main.marina-art-home {
  position:relative;z-index:1;
  width:100%;max-width:none;
  margin:0;
  padding:46px 20px 55px;
  background:transparent;
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
}
.md-vivid-home .brand,
.md-vivid-home .art-grid,
.md-vivid-home .work,
.md-vivid-home .work-caption {
  background:transparent !important;
  background-image:none !important;
  border:0;
  box-shadow:none;
}
.md-vivid-home .brand {
  display:flex;justify-content:center;align-items:center;
  flex:0 0 auto;
  height:clamp(142px,26dvh,252px);
  width:100%;
  padding:0;
  margin:0 auto;
}
.md-vivid-home .brand h1 {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.md-vivid-home .brand img {
  display:block;width:min(100%,760px);height:100%;object-fit:contain;
}
.md-vivid-home .art-grid {
  /* A narrower, matching pair of outside panels shows more of each tall
     painting without distorting the art. The centre stays generously sized. */
  width:min(100%,1180px);
  flex:1 1 auto;min-height:0;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);
  align-items:stretch;
  gap:clamp(20px,2.5vw,45px);
}
.md-vivid-home figure.work {
  min-height:0;min-width:0;height:100%;margin:0;
  display:flex;flex-direction:column;
}
.md-vivid-home .art-link {
  flex:1 1 auto;min-height:0;overflow:hidden;
  display:block;
  cursor:zoom-in;
  background:transparent;
  box-shadow:0 5px 12px rgba(8,24,39,.18);
  border:0;
}
.md-vivid-home .art-link img {
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 48%;
  transition:transform .24s ease;
}
/* The painted rectangles at left and right always have exactly the same
   geometry. Adjust focus instead of editing/cropping the WebP source files. */
.md-vivid-home .work:nth-child(1) .art-link img {object-position:center var(--connection-focus-y);}
.md-vivid-home .work:nth-child(2) {padding-top:10px;}
.md-vivid-home .work:nth-child(2) .art-link img {object-position:center 48%;}
.md-vivid-home .work:nth-child(3) .art-link img {object-position:center var(--deeper-focus-y);}
.md-vivid-home .art-link:hover img,
.md-vivid-home .art-link:focus-visible img {transform:scale(1.012);}
.md-vivid-home .art-link:focus-visible,
.md-vivid-home .gallery-link:focus-visible {outline:3px solid #163e59;outline-offset:3px;}
.md-vivid-home figcaption.work-caption {
  flex:0 0 109px;
  min-height:109px;
  padding:7px 3px 7px;
  margin:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  gap:3px;
  color:#092945;
  position:relative;
  isolation:isolate;
}
/* A small, feathered ivory glow ONLY behind each painting's title and gallery link.
   No rectangular layer covers or desaturates the blue-and-gold watercolor. */
.md-vivid-home figcaption.work-caption::before {
  content:"";
  position:absolute;
  inset:-8px -4px -1px;
  z-index:0;
  pointer-events:none;
  opacity:var(--caption-halo-opacity);
  background:radial-gradient(
    ellipse 56% 58% at 50% 51%,
    rgba(255,253,247,.97) 0%,
    rgba(255,253,247,.94) 42%,
    rgba(255,253,247,.86) 59%,
    rgba(255,253,247,.46) 80%,
    rgba(255,253,247,0) 100%
  );
}
.md-vivid-home figcaption.work-caption > * {
  position:relative;
  z-index:1;
}
.md-vivid-home .work-name {
  display:block;margin:0;
  font:normal clamp(19px,1.35vw,25px)/1.16 Georgia,'Times New Roman',serif;
  letter-spacing:.12em;
  text-transform:none;
  text-shadow:0 1px 2px rgba(255,255,255,.55);
}
.md-vivid-home .work-category {
  display:block;
  font:600 clamp(9px,.7vw,11px)/1.2 system-ui,-apple-system,sans-serif;
  letter-spacing:.28em;
  margin-top:2px;
}
.md-vivid-home .work-category::after {
  content:'';display:block;width:31px;margin:9px auto 5px;
  border-top:2px solid #ecab3e;
}
.md-vivid-home .gallery-link {
  display:inline-block;
  color:#183d65;
  text-decoration:none;
  font:italic clamp(14px,1vw,17px)/1.15 Georgia,'Times New Roman',serif;
  text-shadow:0 1px 2px rgba(255,255,255,.7);
}
.md-vivid-home .gallery-link:hover {text-decoration:underline;}

/* Working lightbox displays FULL uncropped original artwork. */
.md-vivid-home .art-dialog {
  position:fixed;
  inset:0;
  max-width:none;max-height:none;width:100vw;height:100dvh;
  padding:50px 72px 34px;margin:0;
  border:0;background:#091521;
  color:white;text-align:center;
}
.md-vivid-home .art-dialog::backdrop {background:rgba(2,11,20,.95);}
.md-vivid-home .art-dialog[open] {display:flex;flex-direction:column;align-items:center;justify-content:center;}
.md-vivid-home .art-dialog img {
  width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 130px);object-fit:contain;
}
.md-vivid-home .art-dialog p {margin:10px 0 0;font:18px Georgia,serif;}
.md-vivid-home .art-dialog button {
  border:1px solid #becfdb66;border-radius:2px;
  background:#122d44cc;color:white;
  cursor:pointer;font:30px/1 system-ui;
  padding:7px 13px;
}
.md-vivid-home .art-dialog .close-dialog {position:absolute;top:14px;right:18px;}
.md-vivid-home .art-dialog .previous-art {position:absolute;left:10px;top:50%;transform:translateY(-50%);}
.md-vivid-home .art-dialog .next-art {position:absolute;right:10px;top:50%;transform:translateY(-50%);}

/* Fit art, name image, labels and footer in a desktop browser without scrolling. */
@media (min-width:900px) {
  body.md-vivid-home {height:100vh;height:100dvh;overflow:hidden;}
  .md-vivid-home main.marina-art-home {height:100vh;height:100dvh;min-height:0;}
}
@media (max-height:740px) and (min-width:900px) {
  .md-vivid-home .brand {height:clamp(95px,23dvh,180px);}
  .md-vivid-home figcaption.work-caption {flex-basis:88px;min-height:88px;gap:2px;}
  .md-vivid-home .work-name {font-size:18px;}
  .md-vivid-home .work-category::after {margin:5px auto 3px;}
}

/* On narrow screens, keep the paintings legible, the background colorful and scrolling usable. */
@media (max-width:899px) {
  body.md-vivid-home {
    background-size:cover;
    background-position:center top;
    background-attachment:scroll;
  }
  .md-vivid-home .site-header {position:relative;}
  .md-vivid-home .nav-container {gap:8px;padding:10px;}
  .md-vivid-home .nav-main {gap:12px;}
  .md-vivid-home .nav-link {font-size:12px;}
  .md-vivid-home .language-switch {margin-left:6px;}
  .md-vivid-home main.marina-art-home {min-height:0;padding:6px 20px 68px;}
  .md-vivid-home .brand {height:clamp(135px,29vw,240px);}
  .md-vivid-home .art-grid {gap:12px;}
  .md-vivid-home .art-link {height:clamp(250px,45vw,440px);flex:0 0 auto;}
  .md-vivid-home figure.work {height:auto;}
  .md-vivid-home .work:nth-child(2) {padding-top:10px;}
  .md-vivid-home figcaption.work-caption {flex:0 0 auto;min-height:100px;}
  .md-vivid-home .work-name {font-size:17px;}
}
@media (max-width:620px) {
  .md-vivid-home .nav-container {flex-direction:column;}
  .md-vivid-home .art-grid {grid-template-columns:1fr;max-width:430px;gap:16px;}
  .md-vivid-home .art-link {height:auto;aspect-ratio:4/5;}
  /* In the stacked mobile layout, both tall paintings keep equal frames.
     Extra height reduces cropping of their lower whale/orca motifs. */
  .md-vivid-home .work:nth-child(1) .art-link,
  .md-vivid-home .work:nth-child(3) .art-link {aspect-ratio:0.65;}
  .md-vivid-home .work:nth-child(2) {padding-top:0;}
  .md-vivid-home figcaption.work-caption {min-height:93px;}
  .md-vivid-home .site-info-bar {font-size:12px;min-height:40px;padding:8px 6px;gap:8px;}
  .md-vivid-home .site-info-bar span+span::before {margin-right:8px;}
  .md-vivid-home .art-dialog {padding:55px 42px 32px;}
  .md-vivid-home .art-dialog button {font-size:22px;padding:6px 10px;}
}
@media (prefers-reduced-motion:reduce) {
  .md-vivid-home .art-link img {transition:none;}
}