/* Editorial presentation; the hero remains independently styled. */
/* Transparent painted scenery: depth, light and terrain remain independent of HTML. */
.home #work {
  background:
    radial-gradient(ellipse at 12% 24%, #80d3e43b, transparent 24%),
    radial-gradient(ellipse at 92% 46%, #517fc544, transparent 25%),
    radial-gradient(ellipse at 14% 72%, #94779d1c, transparent 23%),
    linear-gradient(#4e9bab, #2886ab 22%, #206c92 45%, #174b70 72%, #12394f);
}
.home #work .work-water {
  height: 1500px; opacity: 1;
  background-size: 100% 100%; background-repeat: no-repeat;
  mask-image: linear-gradient(transparent, #000 80%);
}
.home #work::before {
  height: 100%;
  background:
    radial-gradient(ellipse at 70% 8%, #a7e8f24a, transparent 24%),
    radial-gradient(ellipse at 5% 44%, #7ed7e033, transparent 20%),
    radial-gradient(ellipse at 86% 74%, #669abb29, transparent 25%),
    url('assets/hero/water-v2.webp') center / 100% 100% no-repeat;
  opacity: .17;
  mask-image: linear-gradient(transparent, #000 22%, #0008 70%, transparent);
}
.home #work .project { position: relative; isolation: isolate; }
.home #work .project::before, .home #work .project::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  background-repeat: no-repeat; background-size: 100% 100%;
  mask-image: linear-gradient(transparent, #000 18%, #000 88%, transparent);
}
.home #work .project:nth-child(1)::before {
  background-image: url('assets/environment/sunlit-shelf-v2.webp');
  width: min(1000px, 80vw); aspect-ratio: 3 / 2;
  left: -22vw; bottom: -230px; opacity: .9;
  mask-image: linear-gradient(transparent, #000 35%, #000 88%, transparent);
}
.home #work .project:nth-child(2)::after {
  background-image: url('assets/environment/deep-reef-v2.webp');
  width: min(1050px, 80vw); aspect-ratio: 3 / 2;
  right: -28vw; bottom: -210px; opacity: .78;
}
.home #work .project:nth-child(3)::before {
  background-image: url('assets/environment/deep-reef-v2.webp');
  width: min(1350px, 105vw); aspect-ratio: 3 / 2;
  right: -43vw; top: -250px; opacity: .24; filter: blur(5px);
}
.home #work .project:nth-child(3)::after {
  background-image: url('assets/environment/sunlit-shelf-v2.webp');
  width: min(860px, 65vw); aspect-ratio: 3 / 2;
  left: -29vw; bottom: -210px; opacity: .55;
}
.home #work .project:nth-child(4)::before {
  background-image: url('assets/environment/deep-reef-v2.webp');
  width: min(1150px, 85vw); aspect-ratio: 3 / 2;
  right: -33vw; bottom: -245px; opacity: .88;
}
.home #work .project:nth-child(5)::after {
  background-image: url('assets/environment/sunlit-shelf-v2.webp');
  width: min(1100px, 80vw); aspect-ratio: 3 / 2;
  left: -40vw; bottom: -190px; opacity: .52;
}
.home .about-preview {
  background: radial-gradient(ellipse at 94% 45%, #35688744, transparent 50%), linear-gradient(#12394f, #102f45);
}
.home .contact {
  position: relative; isolation: isolate; overflow: clip;
  background: radial-gradient(ellipse at 45% 80%, #21495a77, transparent 65%), linear-gradient(#102f45, #0c2236);
}
.home .contact::before, .home .contact::after {
  content: ''; position: absolute; bottom: -45px; pointer-events: none; z-index: -1;
  background-repeat: no-repeat; background-size: contain;
  mask-image: linear-gradient(transparent, #000 25%, #000 92%, transparent);
}
.home .contact::before {
  left: -310px; width: min(900px, 70vw); aspect-ratio: 3 / 2;
  background-image: url('assets/environment/sunlit-shelf-v2.webp'); opacity: .45;
}
.home .contact::after {
  right: -280px; width: min(1000px, 76vw); aspect-ratio: 3 / 2;
  background-image: url('assets/environment/deep-reef-v2.webp'); opacity: .8;
}
@media (max-width: 650px) {
  .home #work .work-water { background-size: auto 100%; }
  .home #work .project:nth-child(1)::before { width: 440px; left: -240px; bottom: -118px; opacity: .75; }
  .home #work .project:nth-child(2)::after { width: 430px; right: -240px; bottom: -115px; opacity: .6; }
  .home #work .project:nth-child(3)::before { content: none; }
  .home #work .project:nth-child(3)::after { content: none; }
  .home #work .project:nth-child(4)::before { width: 480px; right: -280px; bottom: -135px; opacity: .7; }
  .home #work .project:nth-child(5)::after { width: 450px; left: -285px; bottom: -120px; opacity: .5; }
  .home .contact::before { width: 440px; left: -325px; opacity: .4; }
  .home .contact::after { width: 470px; right: -340px; opacity: .6; }
}
@font-face { font-family: 'Ocean Editorial'; src: url('assets/fonts/cormorant-garamond-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Ocean Editorial'; src: url('assets/fonts/cormorant-garamond-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

#work { padding-block: clamp(160px, 20vw, 290px) 180px; background: radial-gradient(ellipse at 15% 25%, #85cbd522, transparent 35%), linear-gradient(#4e9bab, #3486a0 28%, #246881 62%, #194658); }
#work .work-content { width: min(1360px, 88%); }
#work .work-intro { max-width: none; margin: 0 0 clamp(100px, 15vw, 220px); padding-left: 8%; }
#work .work-eyebrow { display: flex; justify-content: space-between; max-width: 920px; margin-bottom: 44px; }
#work h2 { font-family: 'Ocean Editorial', Georgia, serif; font-size: clamp(100px, 15vw, 230px); line-height: .8; letter-spacing: -.055em; }
#work h2 em { display: inline-block; margin-left: 18%; margin-top: .14em; color: #f8e5d7; }
#work .work-intro-rule { width: 100%; max-width: 920px; margin-top: 65px; background: #f1f5f34d; }
#work .work-discoveries { gap: clamp(110px, 14vw, 210px); }
#work .project:nth-child(n) { width: 100%; margin: 0; min-height: 0; display: block; align-self: auto; }
#work .project:nth-child(n) .project-link { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 8%; align-items: center; }
#work .project:nth-child(n) .project-image { width: 100%; aspect-ratio: auto; border-radius: 0; padding: 0; animation: none; translate: none; transform: none; grid-column: 2; grid-row: 1; }
#work .project:nth-child(n) .project-info { grid-column: 1; grid-row: 1; padding: 0; max-width: none; }
#work .project-info::before { content: none; }
#work .work-number { display: inline-block; margin: 0 12px 24px 0; font-size: 12px; color: #f8e5d7; }
#work .work-number::after { content: '/'; padding-left: 12px; }
#work .project-discipline { display: inline; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
#work .project-info h3 { font-family: 'Ocean Editorial', Georgia, serif; font-size: clamp(56px, 6.6vw, 102px); line-height: .94; letter-spacing: -.035em; margin-bottom: 30px; }
#work .project-description { font-size: 15px; line-height: 1.8; max-width: 34ch; }
#work .project-action { margin-top: 10px; }
#work .work-artwork { width: 100%; animation: none; filter: none; }
#work .project:nth-child(2) { width: 87%; align-self: flex-end; }
#work .project:nth-child(2) .project-link { grid-template-columns: 1.5fr .8fr; gap: 7%; }
#work .project:nth-child(2) .project-image { grid-column: 1; }
#work .project:nth-child(2) .project-info { grid-column: 2; }
#work .project:nth-child(3) .project-link { grid-template-columns: 1.4fr .8fr; align-items: end; gap: 6%; }
#work .project:nth-child(3) .project-image { grid-column: 1 / -1; grid-row: 1; }
#work .project:nth-child(3) .project-info { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1.4fr .8fr; column-gap: 6%; padding-top: 35px; }
#work .project:nth-child(3) .work-number { grid-column: 1; margin-bottom: 12px; }
#work .project:nth-child(3) .project-discipline { grid-column: 1; margin-bottom: 24px; }
#work .project:nth-child(3) h3 { grid-column: 1; grid-row: 3 / 6; max-width: 10ch; }
#work .project:nth-child(3) .project-description { grid-column: 2; grid-row: 3; }
#work .project:nth-child(3) .recognition, #work .project:nth-child(3) .project-action { grid-column: 2; justify-self: start; }
#work .project:nth-child(4) .project-link { grid-template-columns: 1.3fr 1fr; }
#work .project:nth-child(4) .project-image { grid-column: 1; }
#work .project:nth-child(4) .project-info { grid-column: 2; }
#work .project:nth-child(4) h3 { font-size: clamp(48px, 5.5vw, 82px); }
#work .project:nth-child(5) { width: 80%; align-self: center; }
#work .project:nth-child(5) .project-link { grid-template-columns: 1fr .8fr; gap: 16%; }
#work .project:nth-child(5) h3 { font-size: clamp(70px, 8vw, 120px); }

/* The end of the homepage continues the water into a quiet colophon. */
.home .about-preview { background: radial-gradient(ellipse at 94% 45%, #35688744, transparent 50%), linear-gradient(#12394f, #102f45); color: #f4f1e9; padding-block: 130px; }
.home .about-preview h2, .contact h2, .case-page h1, .case-page .story-section h2, .next-project h2, .about-page h1, .about-page h2 { font-family: 'Ocean Editorial', Georgia, serif; font-weight: 400; letter-spacing: -.035em; }
.home .about-preview .signature-type h2 { font-size: clamp(70px, 9vw, 140px); }
.home .about-preview .signature-type h2 span, .home .about-preview .signature-type p span { color: inherit; }
.home .about-preview .section-kicker, .home .about-preview .text-link { color: #f8e5d7; }
.contact { background: #102f40; color: #f4f1e9; padding-block: clamp(90px, 10vw, 150px) 30px; }
.contact .section-kicker, .contact h2 > span, .contact-heading > p, .contact footer, .contact a { color: #f4f1e9; }
.contact h2 { font-size: clamp(80px, 11vw, 168px); line-height: .88; }
.contact .contact-heading { align-items: end; margin-bottom: 65px; }
.contact .contact-links, .contact footer { border-color: #ffffff38; }
.contact .email-link { font-size: clamp(16px, 2.3vw, 32px); overflow-wrap: anywhere; }

/* Case studies retain their individual image sequences and original content. */
.case-page, .about-page { --paper: #e9f1ef; --ink: #123a4b; --muted: #365566; --marine: #356d80; --line: #234f632b; background: linear-gradient(#edf5f1, #dcebea 45%, #b9d5d9); color: var(--ink); }
.case-page .case-opening, .about-page .about-hero { padding-top: 65px; }
.case-page .section-kicker { letter-spacing: .13em; font-size: 11px; }
.case-page .case-opening h1 { font-size: clamp(78px, 9vw, 144px); line-height: .9; margin-bottom: 40px; }
.case-page .case-summary { font-size: 17px; max-width: 43ch; }
.case-page .case-flow { padding-block: 110px 150px; }
.case-page .case-pair { margin-bottom: 130px; gap: 7%; }
.case-page .story-section h2 { font-size: clamp(38px, 4vw, 64px); line-height: 1; }
.case-page .story-section p { font-size: 15px; }
.case-page .case-figure { background: none; border-radius: 0; padding: 0; }
.case-page .case-figure figcaption { font-size: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.case-page .image-duet { gap: 5%; margin-block: 65px; }
.case-page .facts { margin-top: 60px; padding-block: 25px 40px; }
.case-page .next-project { background: #194658; color: #f4f1e9; padding-block: 85px; }
.case-page .next-project .next-inner p, .case-page .next-project h2 { color: #f4f1e9; }
.case-page .next-project h2 { font-size: clamp(50px, 6vw, 90px); line-height: 1; }
.case-page .next-image { background: transparent; }
.about-page .about-hero .signature-type h1 { font-size: clamp(110px, 15vw, 220px); line-height: .82; }
.about-page .about-hero h1 span { display: block; margin-left: 13%; font-style: italic; color: var(--marine); }
.about-page .signature-mark { width: 14%; top: 14%; }
.about-page .about-lead { margin-top: 110px; margin-bottom: 45px; }
.about-page .about-lead h2, .about-page .biography h2, .about-page .practice h2 { font-size: clamp(42px, 4.4vw, 68px); line-height: 1; }
.about-page .biography { padding-block: 90px 110px; }
.about-page .practice { padding-bottom: 130px; }

@media (max-width: 850px) {
  #work .project:nth-child(n) { width: 100%; }
  #work .project:nth-child(n) .project-link { gap: 5%; }
  #work .project-info h3 { font-size: 54px; }
  .case-page .case-opening h1 { font-size: 76px; }
}
@media (max-width: 650px) {
  #work { padding-block: 150px 100px; }
  #work .work-content { width: calc(100% - 40px); }
  #work .work-intro { padding: 0; margin-bottom: 100px; }
  #work .work-eyebrow { font-size: 9px; margin-bottom: 35px; }
  #work h2 { font-size: clamp(80px, 19vw, 120px); }
  #work h2 em { margin-left: 8%; }
  #work .work-intro-rule { margin-top: 40px; }
  #work .work-discoveries { gap: 110px; }
  #work .project:nth-child(n) .project-link { display: flex; flex-direction: column; gap: 30px; align-items: stretch; }
  #work .project:nth-child(n) .project-info { display: block; order: -1; padding: 0; }
  #work .project:nth-child(n) .project-image { width: 100%; align-self: stretch; }
  #work .project:nth-child(n) h3 { font-size: clamp(48px, 13vw, 76px); max-width: none; margin-bottom: 22px; }
  #work .project-description { font-size: 14px; }
  #work .work-number { margin-bottom: 22px; }
  #work .project:nth-child(5) .project-image { width: 80%; align-self: flex-end; }
  .home .about-preview { padding-block: 85px; }
  .contact .contact-heading { margin-bottom: 40px; }
  .contact h2 { font-size: clamp(68px, 17vw, 108px); }
  .case-page .case-opening, .about-page .about-hero { padding-top: 40px; }
  .case-page .case-opening h1 { font-size: clamp(56px, 14vw, 86px); overflow-wrap: normal; }
  .case-page .case-flow { padding-block: 65px 85px; }
  .case-page .case-pair { margin-bottom: 75px; }
  .case-page .case-summary { font-size: 16px; }
  .case-page .facts { margin-top: 35px; }
  .case-page .next-project { padding-block: 65px; }
  .about-page .about-hero .signature-type h1 { font-size: clamp(76px, 22vw, 140px); }
  .about-page .signature-mark { position: static; width: 70px; margin: 30px 0 0 auto; }
  .about-page .about-lead { margin-top: 50px; }
  .about-page .biography { padding-block: 60px; }
  .about-page .practice { padding-bottom: 80px; }
}