/* The portfolio reads as one open page; the meadow keeps its existing artwork. */
[data-theme='gouache'] [data-layout='landing'] { --bg: #f8f6ef; --bg-deep: #f8f6ef; }
.screen--landing { background: var(--bg); animation: none; }
.bio-page.portfolio {
  --portfolio-ink: #175578;
  display: block;
  width: min(1440px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: 44px clamp(24px, 5.4vw, 78px) 0;
}
.portfolio-masthead { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.portfolio .bio-wordmark { font-size: 36px; white-space: nowrap; }
.portfolio .bio-wordmark span { color: var(--portfolio-ink); margin-left: 5px; }
.portfolio-contact { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; font-family: var(--font-serif); font-size: 25px; }
.portfolio-intro { text-align: center; margin-top: 12px; }
.portfolio-intro h1,.portfolio-intro h2 { font-family: var(--font-serif); font-size: clamp(68px, 10.9vw, 158px); font-weight: 400; letter-spacing: -.035em; line-height: .97; }
/* Exact lettering from the approved artwork. The crop excludes its adjacent
   caption, retaining the descending g; alt text keeps the heading accessible. */
.portfolio-script { display: block; position: relative; width: 65%; max-width: 835px; aspect-ratio: 690 / 150; margin: -19px auto 0; overflow: hidden; mix-blend-mode: multiply; clip-path: polygon(0 0,90% 0,90% 24%,100% 24%,100% 100%,78% 100%,78% 80%,0 80%); }
.portfolio-script img { position: absolute; width: 100%; max-width: none; height: auto; left: 0; top: 0; filter: brightness(1.1); }
.portfolio-intro > p { font-family: var(--font-serif); font-size: clamp(21px, 2.2vw, 30px); line-height: 1.2; margin: -26px auto 0; }
.portfolio-feature { position: relative; width: 74%; max-width: 930px; margin: 12px auto 0; }
.portfolio-print { display: block; padding: 12px; background: var(--bg-raised); box-shadow: 0 2px 6px rgb(40 30 15 / .12); transform: rotate(-1.6deg); transition: transform 220ms var(--ease-out); }
.portfolio-print img { display: block; width: 100%; height: auto; aspect-ratio: 2.05; object-fit: cover; object-position: center 55%; }
.portfolio-note { position: absolute; right: -158px; top: 65%; width: 155px; aspect-ratio: 155 / 110; overflow: hidden; mix-blend-mode: multiply; pointer-events: none; }
.portfolio-note img { position: absolute; width: 767.741935%; max-width: none; height: auto; left: -630.967742%; top: -663.636364%; filter: brightness(1.1); }
.portfolio-watch { display: flex; align-items: center; justify-content: center; gap: 24px; width: fit-content; max-width: 100%; margin: 24px auto 0; padding: 8px; }
.portfolio-play { display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; flex-shrink: 0; width: 58px; height: 58px; transition: transform 180ms var(--ease-out); }
.portfolio-play svg { fill: currentColor; }
.portfolio-feature-title { display: block; font-family: var(--font-serif); font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }
.portfolio-action { display: inline-block; font-family: var(--font-serif); font-size: 22px; line-height: 1.4; text-decoration: underline; text-decoration-color: var(--portfolio-ink); text-decoration-thickness: 1px; text-underline-offset: 8px; }
.portfolio-destinations { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 0; max-width: 830px; margin: 35px auto 0; }
.portfolio-link { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 8px 40px; flex: 1 1 340px; min-height: 80px; }
.portfolio-link + .portfolio-link { border-left: 1px solid var(--line); }
.portfolio-link-title { display: block; font-family: var(--font-serif); font-size: 34px; line-height: 1.15; }
.portfolio-link-sub { display: block; font-size: 15px; color: var(--ink-3); margin-top: 7px; line-height: 1.5; }
.portfolio-link > svg { flex-shrink: 0; transition: transform 180ms var(--ease-out); }
.portfolio a:focus-visible { outline: 2px solid var(--portfolio-ink); outline-offset: 8px; }
.portfolio + .meadow-footer { margin-top: -60px; }
@media (hover: hover) and (pointer: fine) {
  .portfolio-print:hover { transform: rotate(-.5deg) translateY(-3px); }
  .portfolio-watch:hover .portfolio-play { transform: scale(1.06); }
  .portfolio-contact:hover,.portfolio-link:hover .portfolio-link-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .portfolio-link:hover > svg { transform: translateX(4px); }
}
@media (max-width: 1150px) {
  .portfolio-feature { width: 78%; }
  .portfolio-note { right: -105px; width: 105px; }
}
@media (max-width: 700px) {
  .bio-page.portfolio { padding: 26px 22px 0; }
  .portfolio .bio-wordmark { font-size: 28px; }
  .portfolio-contact { font-size: 19px; gap: 8px; }
  .portfolio-contact svg { width: 16px; }
  .portfolio-intro { margin-top: 40px; }
  .portfolio-intro h1,.portfolio-intro h2 { font-size: clamp(48px, 12.5vw, 86px); }
  .portfolio-script { width: 100%; margin-top: 5px; }
  .portfolio-intro > p { margin-top: 22px; font-size: 22px; }
  .portfolio-feature { width: 100%; max-width: 100%; margin-top: 34px; }
  .portfolio-print { padding: 7px; }
  .portfolio-print img { aspect-ratio: 1.75; }
  .portfolio-note { position: relative; display: block; right: auto; top: auto; width: 105px; margin: 4px -3px -25px auto; }
  .portfolio-watch { margin-top: 12px; gap: 15px; }
  .portfolio-play { width: 48px; height: 48px; }
  .portfolio-feature-title { font-size: 29px; }
  .portfolio-action { font-size: 22px; }
  .portfolio-destinations { margin-top: 30px; gap: 0; }
  .portfolio-link { flex-basis: 100%; padding: 20px 8px; min-height: 90px; }
  .portfolio-link + .portfolio-link { border-left: 0; border-top: 1px solid var(--line-soft); }
  .portfolio-link-title { font-size: 30px; }
  .portfolio-link-sub { font-size: 12px; }
  .portfolio + .meadow-footer { margin-top: -25px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio a,.portfolio a svg,.portfolio-play { transition: none; }
  .portfolio-print:hover { transform: rotate(-1.6deg); }
  .portfolio-watch:hover .portfolio-play,.portfolio-link:hover > svg { transform: none; }
}