/* Iteration 4: existing layouts and typography, on cotton paper. */
:root {
  --wc-paper: url('images/watercolor-paper.webp');
  --wc-wash: url('images/watercolor-wash.webp');
  --wc-swatch-dry: url('images/watercolor-swatch-dry.webp');
  --wc-swatch-wet: url('images/watercolor-swatch-wet.webp');
  --wc-ink: #28232f;
  --wc-study-edge: polygon(6px 4px, 13% 0, 27% 3px, 46% 1px, 68% 3px, 87% 0, calc(100% - 5px) 3px, 100% 12%, calc(100% - 3px) 31%, 100% 52%, calc(100% - 2px) 73%, 100% 91%, calc(100% - 5px) calc(100% - 3px), 83% 100%, 63% calc(100% - 3px), 42% 100%, 24% calc(100% - 2px), 5px calc(100% - 1px), 0 87%, 3px 68%, 0 47%, 2px 26%, 0 12%);
  --wc-edge: polygon(2px 2px, 17% 0, 34% 1px, 51% 0, 72% 2px, 89% 0, calc(100% - 2px) 2px, 100% 19%, calc(100% - 1px) 43%, 100% 68%, calc(100% - 2px) calc(100% - 2px), 81% 100%, 61% calc(100% - 1px), 42% 100%, 23% calc(100% - 2px), 2px calc(100% - 1px), 0 79%, 1px 54%, 0 27%);
}
body {
  background-color: #f3f4f6;
  background-image: linear-gradient(rgba(244,245,247,.45), rgba(244,245,247,.45)), var(--wc-paper);
  background-size: auto, 520px 520px;
}
@media (pointer: fine) {
  body, body :is(a, button, [role='button'], .pokemon-card) {
    cursor: url('images/watercolor-cursor.svg') 16 2, auto;
  }
  input, textarea { cursor: text; }
  button:disabled { cursor: wait; }
}

/* Paper rests a little above the page; original navigation stays intact. */
.header, .project-body .header {
  position: relative;
  z-index: 2;
  isolation: isolate;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 0 .5px rgba(59,67,80,.43))
    drop-shadow(1px 2px 0 #d0d5dc)
    drop-shadow(3px 5px 4px rgba(40,35,47,.15))
    drop-shadow(8px 13px 18px rgba(40,35,47,.13));
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: polygon(5px 3px, 14% 0, 28% 2px, 51% 0, 76% 2px, calc(100% - 6px) 2px, calc(100% - 2px) 8px, 100% 36%, calc(100% - 1px) 69%, calc(100% - 4px) calc(100% - 4px), 79% 100%, 59% calc(100% - 2px), 38% 100%, 19% calc(100% - 1px), 5px calc(100% - 2px), 1px calc(100% - 8px), 0 61%, 2px 29%);
  background-color: #fff;
  background-image: linear-gradient(rgba(255,255,255,.74), rgba(255,255,255,.74)), var(--wc-paper);
  background-size: auto, 520px 520px;
  box-shadow: inset 0 1px 0 #fff, inset -1px -1px 0 rgba(40,35,47,.06);
}
@media (max-width:600px) {
  .nav {
    background-color: #fff;
    background-image: linear-gradient(rgba(255,255,255,.74), rgba(255,255,255,.74)), var(--wc-paper);
    background-size: auto, 520px 520px;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(59,67,80,.22), 1px 2px 0 #d0d5dc, 3px 5px 4px rgba(40,35,47,.21), 8px 13px 18px rgba(40,35,47,.19);
  }
}
.work-card, .quick-case__summary, .quick-case__visual, .quick-case__clip, .media-card, .exp-card {
  background-color: #f9fafb;
  background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), var(--wc-paper);
  background-size: auto, 520px 520px;
}
/* Cut-paper cards: a clear edge, a little thickness and a soft cast shadow. */
.work-card, .quick-case__summary, .exp-card {
  background-image: linear-gradient(rgba(255,255,255,.64), rgba(255,255,255,.64)), var(--wc-paper);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(40,35,47,.04),
    0 0 0 1px rgba(59,67,80,.18),
    0 3px 0 #d1d6dd,
    0 12px 24px rgba(40,35,47,.11);
}
/* White study sheets keep the grid, image sizes and original typography. */
.work-card:not(.text-card), .exp-card {
  position: relative;
  isolation: isolate;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 1px .6px rgba(59,67,80,.14)) drop-shadow(2px 6px 10px rgba(40,35,47,.08));
}
.work-card:not(.text-card)::before, .exp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: var(--wc-study-edge);
  background-color: #fff;
  background-image: linear-gradient(rgba(255,255,255,.64), rgba(255,255,255,.64)), var(--wc-paper);
  background-size: auto, 520px 520px;
}
.work-card:not(.text-card) .work-card-image {
  clip-path: polygon(6px 4px, 13% 0, 27% 3px, 46% 1px, 68% 3px, 87% 0, calc(100% - 5px) 3px, 100% 12%, calc(100% - 2px) 49%, 100% 82%, 100% 100%, 0 100%, 0 82%, 2px 48%, 0 12%);
}
/* A quiet pigment glaze sits on the same white paper as the study cards. */
.work-card.text-card {
  --wc-swatch: var(--wc-swatch-dry);
  --wc-swatch-turn: none;
  position: relative;
  isolation: isolate;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 1px .5px rgba(73,77,83,.13)) drop-shadow(1px 4px 6px rgba(73,77,83,.08));
}
.work-card.text-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  clip-path: var(--wc-study-edge);
  background-color: #fff;
  background-image: linear-gradient(rgba(255,255,255,.64), rgba(255,255,255,.64)), var(--wc-paper);
  background-size: auto, 520px 520px;
}
.work-card.text-card .work-card-content { padding: 36px; }
.work-card.text-card.watercolor-surface::before {
  inset: 5px;
  border-radius: 0;
  background: var(--wc-swatch) center / 100% 100% no-repeat;
  transform: var(--wc-swatch-turn);
  opacity: .24;
  filter: saturate(.15);
  mix-blend-mode: normal;
  mask-image: none;
  transition: none;
}
.work-card.text-card.watercolor-surface.is-washed::before { opacity: .24; }
.work-card.text-card[data-swatch='1'],
.work-card.text-card[data-swatch='3'],
.work-card.text-card[data-swatch='5'] { --wc-swatch: var(--wc-swatch-wet); }
.work-card.text-card[data-swatch='2'],
.work-card.text-card[data-swatch='5'] { --wc-swatch-turn: scaleX(-1); }
.work-card.text-card[data-swatch='3'] { --wc-swatch-turn: scaleY(-1); }
.work-card.text-card[data-swatch='4'] { --wc-swatch-turn: scale(-1); }
.project-intro, .quick-case__intro {
  background-color: #e4e7eb;
  background-image: linear-gradient(rgba(214,220,227,.58), rgba(214,220,227,.58)), var(--wc-paper);
  background-size: auto, 520px 520px;
}
.footer {
  background-color: #626874;
  background-image: linear-gradient(rgba(84,91,106,.92), rgba(84,91,106,.92)), var(--wc-paper);
  background-size: auto, 520px 520px;
}

/* One watery reveal on entry; the pigment stays after it has settled. */
.watercolor-surface { position: relative; isolation: isolate; }
.watercolor-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--wc-wash) left center / 115% 150% no-repeat;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  mask-image: linear-gradient(90deg, #000 0%, #000 39%, transparent 52%, transparent 100%);
  mask-size: 260% 100%;
  mask-position: 100% 0;
  transition: mask-position 2.2s cubic-bezier(.2,.55,.25,1), opacity 1.7s ease;
}
.watercolor-surface.is-washed::before { mask-position: 0 0; opacity: .8; }
/* The overview remains plain paper, including when an older script is cached. */
.quick-case__summary.watercolor-surface::before { display: none; }
.footer.watercolor-surface::before {
  /* The lightest possible wash stays above 5:1 against white text. */
  background-image: linear-gradient(100deg, rgba(58,89,132,.9), rgba(62,94,131,.88)), var(--wc-wash);
  background-blend-mode: multiply;
  mix-blend-mode: normal;
}
.footer.watercolor-surface.is-washed::before { opacity: .72; }

/* Slightly irregular edges on the two loose sheets of paper. */
.cookie-consent.watercolor-surface { position: fixed; }
.contact-dialog__panel, .cookie-consent {
  isolation: isolate;
  color: var(--wc-ink);
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 0 .5px rgba(59,67,80,.65))
    drop-shadow(1px 2px 0 #c9cfd7)
    drop-shadow(3px 6px 3px rgba(40,35,47,.24))
    drop-shadow(8px 15px 16px rgba(40,35,47,.22));
}
.contact-dialog__panel::after, .cookie-consent::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: var(--wc-edge);
  background-color: #fff;
  background-image: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)), var(--wc-paper);
  background-size: auto, 520px 520px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(40,35,47,.1);
  pointer-events: none;
}
.contact-dialog__panel.watercolor-surface::before,
.cookie-consent.watercolor-surface::before { clip-path: var(--wc-edge); }
.contact-dialog__panel.watercolor-surface.is-washed::before { opacity: .32; }
.cookie-consent.watercolor-surface.is-washed::before { opacity: .36; }
.contact-dialog__title, .contact-success__message { text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.contact-form input, .contact-form textarea {
  background: rgba(255,255,255,.65);
  border-color: #6d798a;
  box-shadow: inset 0 1px 3px rgba(40,35,47,.035);
}
.contact-form__submit-label { color: #3e4e64; }
.contact-form__submit svg g { filter: drop-shadow(0 2px 2px rgba(40,35,47,.11)); }
.contact-success__eyeball circle:first-child { fill: #94b7d6; fill-opacity: .2; }

/* Exact original index artwork, with the wash below the ink. */
.portfolio-entry::before, .portfolio-entry::after { display: none; }
.portfolio-entry .hero { overflow: clip; }
.portfolio-entry .face { position: relative; isolation: isolate; }
.entry-watercolor {
  position: absolute;
  z-index: -1;
  width: calc(100% + 330px);
  max-width: none;
  height: auto;
  left: 50%;
  top: calc(50% - 45px);
  transform: translate(-50%, -50%);
  opacity: .8;
  mix-blend-mode: multiply;
  pointer-events: none;
  mask-image: linear-gradient(35deg, #000 8%, #000 37%, rgba(0,0,0,.82) 52%, rgba(0,0,0,.2) 73%, transparent 91%);
}
.portfolio-entry .eye { position: relative; z-index: 1; }
.portfolio-entry .face { margin-bottom: clamp(22px, 4dvh, 40px); }
.portfolio-entry .btn-stone svg g { filter: drop-shadow(0 2px 2px rgba(40,35,47,.11)); }
.portfolio-entry .btn-label { font-weight: 600; letter-spacing: .09em; color: #344257; }
.portfolio-entry .salam-stone { margin-bottom: clamp(14px, 2dvh, 22px); }

/* Pigment blooms inside the existing SVG outline. It never obscures the ink. */
.watercolor-button-bloom {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(-35px, 15px) scale(.08);
  filter: blur(7px);
  transition: opacity .2s ease, transform .42s cubic-bezier(.2,.7,.3,1);
}
.is-blushing .watercolor-button-bloom { opacity: .9; transform: translate(0,0) scale(1.2); }
.is-blushing .btn-label { color: #28232f; }
@media (max-width:560px) {
  .entry-watercolor { width: calc(100% + 150px); top: calc(50% - 25px); opacity: .76; }
  .portfolio-entry .face { margin-bottom: 26px; }
}
@media (max-height:600px) {
  .portfolio-entry .face { margin-bottom: 12px; }
  .portfolio-entry .salam-stone { margin-bottom: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .watercolor-surface::before, .watercolor-button-bloom { transition: none; }
}


/* Shared keyboard focus, using the portfolio blue and a light ring on the footer. */
body :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid #3e6fb3;
  outline-offset: 4px;
}
.footer :is(a, button, summary, [tabindex]):focus-visible {
  outline-color: #fff;
}
.pokemon-modal :is(button, [tabindex]):focus-visible,
.lightbox :is(button, [tabindex]):focus-visible {
  outline-color: #fff;
}
.device-carousel-track img:focus-visible { outline-offset: -6px; }

/* Keyboard access to the existing card interaction preserves the reading order. */
.pokemon-fan .pokemon-card { z-index: var(--card-layer, auto); }
.pokemon-fan .pokemon-card:focus-within { z-index: 5; }
.pokemon-card-front-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
}
.pokemon-fan .pokemon-card-front-trigger:focus-visible { outline-offset: -6px; }
.pokemon-dialog-open { overflow: hidden; }
.contact-form__required-note {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #4b4f5c;
}